performance-optimizer
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesePerformance Optimizer
性能优化指南
Overview
概述
Provides a systematic approach to application performance optimization across the full stack. Use when diagnosing slow page loads, high API latency, database bottlenecks, or scaling issues. Not a substitute for application-specific profiling -- always measure before optimizing.
提供全栈应用性能优化的系统化方法。适用于诊断页面加载缓慢、API延迟过高、数据库瓶颈或扩展问题等场景。请注意，本指南不能替代针对特定应用的性能分析——优化前务必先进行测量。
Quick Reference
快速参考
Performance Budgets
性能预算
| Metric | Target | Category |
|---|---|---|
| Largest Contentful Paint (LCP) | < 2.5s | Core Web Vital |
| Interaction to Next Paint (INP) | < 200ms | Core Web Vital |
| Cumulative Layout Shift (CLS) | < 0.1 | Core Web Vital |
| First Contentful Paint (FCP) | < 1.8s | Frontend |
| Time to Interactive (TTI) | < 3.8s | Frontend |
| Total Blocking Time (TBT) | < 200ms | Frontend |
| API Response Time (P95) | < 500ms | Backend |
| Database Query Time (P95) | < 100ms | Database |
| Server Response Time (TTFB) | < 600ms | Backend |
| 指标 | 目标 | 类别 |
|---|---|---|
| Largest Contentful Paint (LCP) | < 2.5s | 核心Web指标 |
| Interaction to Next Paint (INP) | < 200ms | 核心Web指标 |
| Cumulative Layout Shift (CLS) | < 0.1 | 核心Web指标 |
| First Contentful Paint (FCP) | < 1.8s | 前端 |
| Time to Interactive (TTI) | < 3.8s | 前端 |
| Total Blocking Time (TBT) | < 200ms | 前端 |
| API Response Time (P95) | < 500ms | 后端 |
| Database Query Time (P95) | < 100ms | 数据库 |
| Server Response Time (TTFB) | < 600ms | 后端 |
Optimization Phases
优化阶段
| Phase | Focus | Key Action |
|---|---|---|
| 1. Profiling | Identify real bottlenecks | Chrome DevTools, React Profiler, EXPLAIN ANALYZE |
| 2. Database | Eliminate slow queries | Strategic indexes, fix N+1, connection pooling |
| 3. Caching | Reduce redundant work | Redis, HTTP headers, CDN for static assets |
| 4. Frontend | Reduce bundle and render time | Bundle analysis, code splitting, resource hints, lazy loading |
| 5. Backend | Speed up API responses | Serverless optimization, streaming, conditional requests, queues |
| 6. Monitoring | Sustain performance | APM tools, alerting thresholds, dashboards |
| 阶段 | 重点方向 | 关键行动 |
|---|---|---|
| 1. 性能分析 | 识别真实瓶颈 | Chrome DevTools, React Profiler, EXPLAIN ANALYZE |
| 2. 数据库调优 | 消除慢查询 | 策略性索引、修复N+1问题、连接池配置 |
| 3. 缓存优化 | 减少重复工作 | Redis, HTTP headers, 静态资源CDN加速 |
| 4. 前端优化 | 减少包体积与渲染时间 | 包分析、代码分割、资源提示、懒加载 |
| 5. 后端优化 | 提升API响应速度 | 无服务器优化、流式传输、条件请求、队列处理 |
| 6. 性能监控 | 维持性能水平 | APM工具、告警阈值、仪表盘配置 |
Caching Layers
缓存层级
| Layer | Scope | Duration |
|---|---|---|
| Browser Cache | HTTP headers | Static assets: 1 year (immutable); HTML: no-cache |
| CDN | Cloudflare, CloudFront | Same as browser, purge on deploy |
| Application | Redis, Memcached | Varies (e.g., 1 hour for user data) |
| Database | Query cache | Automatic |
| 层级 | 适用范围 | 有效期 |
|---|---|---|
| 浏览器缓存 | HTTP headers | 静态资源：1年（不可变）；HTML：不缓存 |
| CDN缓存 | Cloudflare, CloudFront | 与浏览器缓存规则一致，部署时清除缓存 |
| 应用层缓存 | Redis, Memcached | 视情况而定（例如用户数据缓存1小时） |
| 数据库缓存 | 查询缓存 | 自动生效 |
Common Mistakes
常见误区
| Mistake | Correct Pattern |
|---|---|
| Optimizing before profiling | Measure first with Chrome DevTools, EXPLAIN ANALYZE, or APM tools to find real bottlenecks |
| Adding indexes on every column | Use strategic indexes on columns in WHERE, ORDER BY, and JOIN clauses; monitor with slow query log |
| SELECT * on large tables | Select only needed columns to reduce I/O and memory |
| N+1 queries in loops | Eager loading or DataLoader batching |
| Functions in WHERE clause | Store normalized values, use generated columns to preserve index usage |
| Caching without an invalidation strategy | Define TTL and invalidate-on-write policies; stale cache is worse than no cache |
| Loading entire libraries for a single utility | Use direct imports and tree-shaking |
| Running heavy computations synchronously in request handlers | Offload to background job queues (BullMQ) and return immediately |
| 误区 | 正确做法 |
|---|---|
| 未进行性能分析就直接优化 | 先使用Chrome DevTools、EXPLAIN ANALYZE或APM工具进行测量，找到真实瓶颈后再优化 |
| 为所有字段添加索引 | 仅在WHERE、ORDER BY和JOIN子句涉及的字段上创建策略性索引；通过慢查询日志监控索引使用情况 |
| 在大表上使用SELECT *查询 | 仅选择所需字段，以减少I/O和内存占用 |
| 循环中出现N+1查询问题 | 使用预加载或DataLoader批量处理查询 |
| 在WHERE子句中使用函数 | 存储标准化值，使用生成列以保留索引可用性 |
| 缓存未配置失效策略 | 定义TTL（生存时间）和写时失效策略；过期缓存比无缓存的危害更大 |
| 为单个功能加载整个库 | 使用直接导入和摇树优化（tree-shaking） |
| 在请求处理程序中同步执行繁重计算 | 将任务卸载到后台作业队列（如BullMQ）并立即返回响应 |
Delegation
任务分工
When working on performance optimization, delegate to:
- -- React-specific performance patterns
frontend-builder - -- Rate limiting and DDoS protection
application-security - -- Build pipeline optimization
ci-cd-architecture
进行性能优化工作时，可将以下任务分工给对应角色：
- -- React专属性能优化方案
frontend-builder - -- 限流与DDoS防护
application-security - -- 构建流水线优化
ci-cd-architecture
References
参考资料
- Profiling and Measurement -- Chrome DevTools, React Profiler, Node.js/Python profiling, database EXPLAIN
- Database Optimization -- Strategic indexes, N+1 fixes, query optimization, connection pooling
- Caching Strategies -- Redis patterns, HTTP cache headers, CDN configuration
- Frontend Performance -- Bundle analysis, code splitting, resource hints, third-party scripts, mobile performance, React patterns
- Backend Performance -- Serverless optimization, streaming responses, conditional requests, background queues, rate limiting
- Monitoring and Alerting -- APM tools, custom monitoring, dashboards, alert thresholds
- 性能分析与测量 -- Chrome DevTools, React Profiler, Node.js/Python性能分析, 数据库EXPLAIN语句
- 数据库优化 -- 策略性索引、N+1问题修复、查询优化、连接池配置
- 缓存策略 -- Redis使用模式、HTTP缓存头配置、CDN设置
- 前端性能优化 -- 包分析、代码分割、资源提示、第三方脚本优化、移动端性能、React优化方案
- 后端性能优化 -- 无服务器优化、流式响应、条件请求、后台队列、限流
- 监控与告警 -- APM工具、自定义监控、仪表盘、告警阈值