performance-optimization

性能优化

概览

先测量，再优化。没有测量的性能工作就是猜测 —— 而猜测会导致过早优化，增加复杂度却没改善真正要紧的东西。先 profile，找到真正的瓶颈，修复它，再测一遍。只优化被测量证明要紧的部分。

何时使用

• spec 中有性能要求（加载时间预算、响应时间 SLA）
• 用户或监控报告了卡顿
• Core Web Vitals 分数低于阈值
• 你怀疑某次变更引入了回归
• 构建处理大数据集或高流量的功能

何时不用： 在没有问题证据之前不要优化。过早优化带来的复杂度，比它换来的性能更贵。

Core Web Vitals 目标

指标	Good	Needs Improvement	Poor
LCP（Largest Contentful Paint）	≤ 2.5s	≤ 4.0s	> 4.0s
INP（Interaction to Next Paint）	≤ 200ms	≤ 500ms	> 500ms
CLS（Cumulative Layout Shift）	≤ 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; keep or revert
5. GUARD    → Add monitoring or tests to prevent regression

步骤 1: 测量

两种互补的方法 —— 都要用：

• Synthetic（Lighthouse、DevTools Performance 标签页）： 条件受控、可复现。最适合 CI 回归检测和隔离具体问题。
• RUM（web-vitals library、CrUX）： 真实条件下的真实用户数据。要验证一次修复确实改善了用户体验，这是必需的。

前端：

// Synthetic: Lighthouse in Chrome DevTools (or CI)
// Chrome DevTools → Performance tab → Record
// Chrome DevTools MCP → Performance trace

// RUM: 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 in DevTools Network waterfall
│   │   ├── DNS long? --> Add dns-prefetch / preconnect for known origins
│   │   ├── TCP/TLS long? --> Enable HTTP/2, check edge deployment, keep-alive
│   │   └── Waiting (server) long? --> Profile backend, check queries and caching
│   └── 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