⚡

性能优化Skill performance-optimization

本技能提供一套全面的全栈性能分析与优化框架，涵盖前端、后端、数据库及API的性能瓶颈诊断与解决方案。包含核心网页指标（LCP、INP、CLS、TTFB）优化、数据库查询优化（索引、N+1查询）、缓存策略（内存、分布式、CDN）、前端打包与渲染优化、API响应优化以及性能监控与告警。适用于提升应用速度、降低延迟、提高吞吐量、优化缓存、进行性能剖析、控制打包体积，是应对高流量、提升用户体验和系统可扩展性的关键技能。

DevOps 0 次安装 8 次浏览 更新于 3/2/2026

name: performance-optimization description: 全栈性能分析、优化模式与监控策略 version: 1.0.0 category: 质量与优化 agents: [backend-system-architect, frontend-ui-developer, code-quality-reviewer] keywords: [性能, 优化, 速度, 延迟, 吞吐量, 缓存, 性能剖析, 打包, 核心网页指标]

性能优化技能

全面的框架，用于分析和优化整个技术栈的应用程序性能。

使用时机

  • 应用程序感觉缓慢或无响应
  • 数据库查询耗时过长
  • 前端打包体积过大
  • API响应时间超出目标
  • 核心网页指标需要改进
  • 为扩展或高流量做准备

性能目标

核心网页指标 (前端)

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

后端目标

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

瓶颈类别

类别 症状 工具
网络 高TTFB，加载缓慢 网络面板，WebPageTest
数据库 慢查询，连接池耗尽 EXPLAIN ANALYZE, pg_stat_statements
CPU 高使用率，计算缓慢 性能剖析器，火焰图
内存 内存泄漏，GC停顿 堆快照
渲染 布局抖动 React DevTools，性能面板

数据库优化

关键模式

  1. 添加缺失索引 - 将 Seq Scan 转为 Index Scan
  2. 修复N+1查询 - 使用 JOIN 或 include 代替循环
  3. 游标分页 - 永不加载所有记录
  4. 连接池 - 管理连接生命周期

快速诊断

-- 查找慢查询 (PostgreSQL)
SELECT query, calls, mean_time / 1000 as mean_seconds
FROM pg_stat_statements ORDER BY total_time DESC LIMIT 10;

-- 验证索引使用情况
EXPLAIN ANALYZE SELECT * FROM orders WHERE user_id = 123;

查看 templates/database-optimization.ts 获取N+1修复和分页模式

缓存策略

缓存层次

L1: 内存缓存 (LRU, 记忆化) - 最快
L2: 分布式缓存 (Redis/Memcached) - 共享
L3: CDN (边缘，静态资源) - 全局
L4: 数据库 (物化视图) - 后备

旁路缓存模式

const cached = await redis.get(key);
if (cached) return JSON.parse(cached);
const data = await db.query(...);
await redis.setex(key, 3600, JSON.stringify(data));
return data;

查看 templates/caching-patterns.ts 获取完整实现

前端优化

打包优化

  1. 代码分割 - lazy() 用于基于路由的分割
  2. Tree Shaking - 仅导入所需内容
  3. 图片优化 - WebP/AVIF，懒加载，合适尺寸

渲染优化

  1. 记忆化 - memo(), useCallback(), useMemo()
  2. 虚拟化 - 长列表中仅渲染可见项
  3. 批量DOM操作 - 先读取所有，再写入所有

查看 templates/frontend-optimization.tsx 获取模式

分析命令

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

# 打包分析
npx @next/bundle-analyzer  # Next.js
npx vite-bundle-visualizer # Vite

API优化

响应优化

  1. 字段选择 - 仅返回请求的字段
  2. 压缩 - 启用 gzip/brotli (阈值: 1KB)
  3. ETags - 为未更改数据启用304响应
  4. 分页 - 大数据集使用基于游标的分页

查看 templates/api-optimization.ts 获取中间件示例

监控清单

上线前

  • [ ] Lighthouse 分数 > 90
  • [ ] 核心网页指标通过
  • [ ] 打包体积在预算内
  • [ ] 数据库查询已剖析
  • [ ] 压缩已启用
  • [ ] CDN 已配置

持续进行

  • [ ] 性能监控已激活
  • [ ] 性能退化告警
  • [ ] 流水线中包含 Lighthouse CI
  • [ ] 每周查询分析
  • [ ] 真实用户监控 (RUM)

查看 templates/performance-metrics.ts 获取 Prometheus 指标设置

扩展思考触发器

使用 Opus 4.5 扩展思考来处理：

  • 复杂调试 - 多种潜在原因
  • 架构决策 - 缓存策略选择
  • 权衡分析 - 内存 vs CPU vs 延迟
  • 根因分析 - 性能回归调查

模板参考

模板 用途
database-optimization.ts N+1修复，分页，连接池
caching-patterns.ts Redis旁路缓存，记忆化
frontend-optimization.tsx React memo，虚拟化，代码分割
api-optimization.ts 压缩，ETags，字段选择
performance-metrics.ts Prometheus指标，性能预算