Performance Optimization

性能优化技能

用于分析和优化整个技术栈中应用性能的综合框架。

概述

• 应用运行缓慢或无响应
• 数据库查询耗时过长
• 前端包体积过大
• API 响应时间超出目标
• 需要改进 Core Web Vitals
• 为扩展或高流量做准备

性能目标

Core Web Vitals（前端）

指标	良好	需要改进
LCP（最大内容绘制）	< 2.5s	< 4s
INP（下一次绘制交互）	< 200ms	< 500ms
CLS（累积布局偏移）	< 0.1	< 0.25
TTFB（首字节时间）	< 200ms	< 600ms

后端目标

操作	目标
简单读取	< 100ms
复杂查询	< 500ms
写入操作	< 200ms
索引查找	< 10ms

瓶颈类别

类别	症状	工具
网络	TTFB 高、加载缓慢	Network 选项卡、WebPageTest
数据库	查询缓慢、连接池耗尽	EXPLAIN ANALYZE、pg_stat_statements
CPU	使用率高、计算缓慢	分析器、火焰图
内存	泄漏、GC 暂停	堆快照
渲染	布局抖动	React DevTools、Performance 选项卡

---

协议参考

数据库优化

参见：references/database-optimization.md

涵盖的主要主题：

• 使用 SQLAlchemy selectinload 检测并修复 N+1 查询
• 索引选择策略（B-tree、GIN、HNSW、Hash）
• 解读 EXPLAIN ANALYZE
• 连接池配置
• 游标分页与偏移分页

缓存策略

参见：references/caching-strategies.md

涵盖的主要主题：

• 多级缓存层级（L1-L4）
• Cache-aside 和 write-through 模式
• 缓存失效策略（TTL、基于事件、基于标签）
• Redis 模式（字符串、哈希、列表、集合）
• 防止缓存雪崩
• HTTP 缓存标头和 ETag

Core Web Vitals

参见：references/core-web-vitals.md

涵盖的主要主题：

• LCP 优化（图像、SSR、关键 CSS）
• INP 优化（防抖、Web Workers、任务拆分）
• CLS 优化（图像尺寸、字体加载）
• 使用 web-vitals 库进行测量
• Lighthouse 审计

前端性能

参见：references/frontend-performance.md

涵盖的主要主题：

• 使用 React.lazy() 进行代码拆分
• Tree shaking 和导入优化
• 图像优化（WebP、AVIF、延迟加载）
• 记忆化（memo、useMemo、useCallback）
• 使用 @tanstack/react-virtual 实现列表虚拟化
• 包分析工具

性能分析工具

参见：references/profiling.md

涵盖的主要主题：

• Python 性能分析（cProfile、py-spy、memory_profiler）
• Chrome DevTools 的 Performance 和 Memory 选项卡
• React DevTools Profiler
• PostgreSQL 查询性能分析（pg_stat_statements）
• 火焰图解读
• 使用 k6 和 Locust 进行负载测试

---

快速诊断

数据库

-- Find slow queries (PostgreSQL)
SELECT query, calls, mean_time / 1000 as mean_seconds
FROM pg_stat_statements ORDER BY total_time DESC LIMIT 10;

-- Verify index usage
EXPLAIN ANALYZE SELECT * FROM orders WHERE user_id = 123;

前端

# Lighthouse audit
lighthouse http://localhost:3000 --output=json

# Bundle analysis
npx vite-bundle-visualizer  # Vite
ANALYZE=true npm run build  # Next.js

后端

# Profile running FastAPI server
py-spy record --pid $(pgrep -f uvicorn) --output profile.svg

---

监控清单

上线前

• Lighthouse 评分 > 90
• Core Web Vitals 达标
• 包体积符合预算
• 已分析数据库查询
• 已启用压缩
• 已配置 CDN

持续监控

• 性能监控已启用
• 已设置性能下降告警
• 流水线中已配置 Lighthouse CI
• 每周分析查询
• 真实用户监控（RUM）

---

实际案例

混合搜索优化

**问题：**检索通过率为 87.2%，需要达到 >90%

**解决方案：**将 RRF 获取倍数从 2x 提高到 3x，并增加元数据加权

结果：

• 通过率：87.2% -> 91.6%（+5.1%）
• MRR：0.723 -> 0.777（+7.4%）
• 查询时间：85ms -> 5ms（HNSW 索引）

LLM 响应缓存

问题： 预计 LLM 成本为每年 35k 美元

解决方案： 多级缓存层次结构（Claude 提示词缓存 + Redis 语义缓存）

结果：

• 基准：每年 35k 美元 -> 启用缓存后：每年 2-5k 美元
• 成本降低：85-95%
• 延迟：2000ms -> 5-10ms（语义缓存命中）

向量索引选择

问题： 向量搜索耗时 85ms，目标是 <10ms

解决方案： 从 IVFFlat 切换到 HNSW 索引

结果：

• 查询时间：85ms -> 5ms（快 17 倍）
• 权衡：索引速度变慢（8s 对比 2s），换取更快的查询速度

---

模板参考

模板	用途
database-optimization.ts	修复 N+1 问题、分页、连接池
caching-patterns.ts	Redis cache-aside、记忆化
frontend-optimization.tsx	React memo、虚拟化、代码拆分
api-optimization.ts	压缩、ETag、字段选择
performance-metrics.ts	Prometheus 指标、性能预算

---

扩展思考触发条件

以下情况使用 Opus 4.5 扩展思考：

• 复杂调试 - 存在多种可能原因
• 架构决策 - 选择缓存策略
• 权衡分析 - 内存与 CPU、延迟之间的权衡
• 根因分析 - 调查性能回退

---

相关技能

• caching-strategies - Redis 缓存模式和缓存失效的详细信息
• database-schema-designer - 索引策略和查询优化基础
• observability-monitoring - 性能监控和告警集成
• devops-deployment - CDN 配置和基础设施优化

关键决策

决策	选择	理由
分页策略	大型数据集使用基于游标的分页	无论偏移量如何，性能都稳定，并可处理并发插入
向量索引类型	HNSW 优于 IVFFlat	查询速度快 17 倍，对于读取密集型工作负载，较慢的索引速度可以接受
缓存层次结构	多级（L1-L4）	优化命中率，减少昂贵操作的负载
包拆分	基于路由的代码拆分	减少初始加载量，支持并行下载

---

技能版本：1.2.0 最后更新：2026-01-15 维护者：AI Agent Hub Team

更新日志

v1.2.0 (2026-01-15)

• 重构为基于引用的结构
• 将详细内容移至 references/ 目录
• 将 SKILL.md 从 1079 行缩减至约 290 行

v1.1.0 (2025-12-25)

• 新增全面的前端包分析章节
• 新增 React 19 性能模式
• 新增 TanStack Virtual 列表虚拟化

v1.0.0 (2025-12-14)

• 初始技能，包含数据库优化、缓存和性能分析

---

能力详情

database-optimization

关键词： 慢查询、n+1、查询优化、explain analyze、索引、postgres 性能 解决的问题：

• 如何优化缓慢的数据库查询？
• 通过预加载修复 N+1 查询问题
• 使用 EXPLAIN ANALYZE 诊断查询
• 添加缺失的索引以提升性能

caching-strategies

关键词： 缓存、redis、cdn、cache-aside、write-through、语义缓存 解决的问题：

• 如何实现多级缓存？
• cache-aside 与 write-through 模式的比较
• 用于 LLM 响应的语义缓存
• 缓存失效策略

frontend-performance

关键词： 包大小、延迟加载、代码拆分、摇树优化、lighthouse、web vitals 解决的问题：

• 如何减小前端包的大小？
• 使用 React.lazy() 实现代码拆分
• 优化 Lighthouse 评分
• 修复 Core Web Vitals 问题

core-web-vitals

关键词： lcp、inp、cls、core web vitals、ttfb、fid 解决的问题：

• 如何改进 Core Web Vitals？
• 优化 LCP（最大内容绘制）
• 修复 CLS（累积布局偏移）
• 改进 INP（下次绘制交互延迟）

性能分析

关键词： profile、火焰图、py-spy、Chrome DevTools、内存泄漏、CPU 瓶颈 解决的问题：

• 如何分析 Python 后端的性能？
• 使用 py-spy 生成火焰图
• 使用 DevTools 分析 React 组件的性能
• 查找前端内存泄漏

包体积分析

关键词： 包分析器、Vite 可视化工具、Webpack 包、摇树优化 解决的问题：

• 如何分析包体积？
• 使用 Vite 包可视化工具
• 找出大型依赖项
• 使用摇树优化来优化包体积