performance-optimization

性能优化

概览

优化前先测量。没有测量的性能工作，本质上是在猜，而猜测只会带来过早优化，让复杂度上升却没改善真正重要的地方。先做 profiling，找到真实瓶颈，再修它，再测一次。只优化那些被数据证明值得优化的地方。

何时使用

• Spec 里有性能要求，例如加载预算、响应时间 SLA
• 用户或监控反馈页面 / 接口变慢
• Core Web Vitals 低于阈值
• 你怀疑某个改动带来了性能回退
• 正在做处理大数据集或高流量的功能

不适用的场景： 在没有证据前不要优化。过早优化会增加复杂度，代价往往高于它带来的收益。

Core Web Vitals 目标

指标	Good	Needs Improvement	Poor
LCP	≤ 2.5s	≤ 4.0s	> 4.0s
INP	≤ 200ms	≤ 500ms	> 500ms
CLS	≤ 0.1	≤ 0.25	> 0.25

优化工作流

1. MEASURE  → Establish baseline with real data
2. IDENTIFY → Find the actual bottleneck (not assumed)
3. FIX      → Address the specific bottleneck
4. VERIFY   → Measure again, confirm improvement
5. GUARD    → Add monitoring or tests to prevent regression

步骤 1：测量

前端：

# Lighthouse in Chrome DevTools (or CI)
# Chrome DevTools → Performance tab → Record
# Chrome DevTools MCP → Performance trace

# Web Vitals library in code
import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(console.log);
onINP(console.log);
onCLS(console.log);

后端：

# Response time logging
# Application Performance Monitoring (APM)
# Database query logging with timing

# Simple timing
console.time('db-query');
const result = await db.query(...);
console.timeEnd('db-query');

从哪里开始测

根据“慢在哪里”来决定先测什么：

What is slow?
├── First page load
│   ├── Large bundle? --> Measure bundle size, check code splitting
│   ├── Slow server response? --> Measure TTFB, check API/database
│   └── Render-blocking resources? --> Check network waterfall for CSS/JS blocking
├── Interaction feels sluggish
│   ├── UI freezes on click? --> Profile main thread, look for long tasks (>50ms)
│   ├── Form input lag? --> Check re-renders, controlled component overhead
│   └── Animation jank? --> Check layout thrashing, forced reflows
├── Page after navigation
│   ├── Data loading? --> Measure API response times, check for waterfalls
│   └── Client rendering? --> Profile component render time, check for N+1 fetches
└── Backend / API
    ├── Single endpoint slow? --> Profile database queries, check indexes
    ├── All endpoints slow? --> Check connection pool, memory, CPU
    └── Intermittent slowness? --> Check for lock contention, GC pauses, external deps