性能优化实战

1.1 核心 Web 指标（背下来）

1.2 性能预算（Performance Budget）

• 体积预算：首屏 JS ≤ 200KB（gzip 后）、总 JS ≤ 400KB。
• 时间预算：LCP ≤ 2.5s、INP ≤ 200ms。
• 落地：CI 里用体积分析工具对比每次构建，超预算直接构建失败——性能问题在合并前被拦住。

2.1 代码分割与懒加载

// 路由级代码分割（每个路由一个 chunk，进入才加载）
const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));

// 组件级懒加载（弹窗/图表等大组件，用到才加载）
const Chart = lazy(() => import("./components/BigChart"));

检查工具：构建后用体积分析插件看每个 chunk 的大小，揪出「体积刺客」（比如整个图表库被塞进首屏）。

2.2 资源优化

• 图片：优先 WebP/AVIF（同质量体积小 30%~50%）；装饰图用 CSS/SVG；图标用字体图标或雪碧图。
• 懒加载图片：<img loading="lazy">，视口外图片不加载。
• 响应式图片：srcset 按屏幕宽度选不同尺寸图片，手机不加载桌面大图。
• 字体：font-display: swap 避免文字不可见；只加载需要的字重；中文字体用子集化。
• 依赖体检：定期用体积分析工具找大依赖，能换轻量的就换（如日期库 dayjs 替代 moment）。

// 响应式图片示例
<img
  src="img-800w.jpg"
  srcset="img-400w.jpg 400w, img-800w.jpg 800w, img-1600w.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  loading="lazy"
>

2.3 预加载策略（让浏览器提前干活）

// preload：提前加载当前页面立即要用的关键资源（首屏大图、字体）
<link rel="preload" href="hero.webp" as="image">

// prefetch：空闲时提前拉取「下一步可能访问」的资源（下一页路由）
<link rel="prefetch" href="/about">

// preconnect：提前建立第三方源连接（CDN、接口域名）
<link rel="preconnect" href="https://api.example.com" crossorigin>

2.4 缓存体系（阶段三的落地）

• 静态资源：文件名带哈希 + 长缓存（一年），内容变则 URL 变自动拉新。
• HTML：no-cache 每次协商，保证入口最新。
• 接口：GET 类数据用请求缓存库缓存；敏感数据绝不进 CDN。
• 离线兜底（进阶）：Service Worker 缓存壳子，弱网秒开。

3.1 减少无效渲染

// 1. memo 组件：props 没变不重渲染
const Item = memo(function Item({ data, onSelect }) {
  return <li onClick={() => onSelect(data.id)}>{data.name}</li>;
});

// 2. 状态选择器：只订阅自己需要的部分（阶段六 Zustand 选择器）
const price = useStore(s => s.price);

// 3. 列表项抽组件 + key 稳定：列表更新时只 diff 变化的项

3.2 大列表：虚拟滚动

渲染 1 万个 DOM 节点必然卡。虚拟滚动的思路：无论列表多长，只渲染可视区 + 缓冲区的几十行，滚动时更新偏移。

// 成熟库：react-window（轻量）或 react-virtualized（功能全）
import { FixedSizeList as List } from "react-window";

<List
  height={600}              // 可视区高度
  itemCount={100000}        // 总条数 10 万
  itemSize={40}             // 每行高度（固定）
  width="100%"
>
  {({ index, style }) => (
    <div style={style}>第 {index} 行</div>   // style 由库计算位置
  )}
</List>;

3.3 骨架屏与占位

• 数据加载中用骨架屏（灰色块模拟布局），比转圈体验好得多——用户「先看到结构，内容到了再填充」。
• 图片加载中给固定宽高（防止 CLS）或模糊占位（LQIP）。
• 配合 Suspense + 流式渲染，实现「边下载边显示」。

4.1 长任务拆分

主线程单次执行超过 50ms 就是长任务（Long Task），期间用户交互无响应。大计算拆成小片，用空闲时间处理：

// 思路：分批处理，每批让出主线程
async function processBigData(items) {
  const BATCH = 100;
  for (let i = 0; i < items.length; i += BATCH) {
    processBatch(items.slice(i, i + BATCH));
    await new Promise(r => setTimeout(r, 0));  // 让出主线程给交互
  }
}

// 更优雅：requestIdleCallback 空闲时做（低优先级）
requestIdleCallback(() => preloadNextPage());

4.2 Web Worker：把重活挪出主线程

// 计算密集任务（图片处理、数据清洗、加密）丢给 Worker
const worker = new Worker("./calc-worker.js");
worker.postMessage({ type: "process", data: bigData });  // 发任务
worker.onmessage = (e) => setResult(e.data);             // 收结果

注意：Worker 里不能操作 DOM，通过消息通信；只适合 CPU 密集任务（I/O 密集用异步就够了）。

4.3 内存泄漏排查

典型泄漏源与排查手段：

排查工具：DevTools Memory 面板「记录快照 → 操作 → 再快照 → 对比」，找持续增长的对象。

5.1 三层监控体系

• 实验室监控（Lab）：Lighthouse CI 每次构建跑分，卡阈值。
• 真实用户监控（RUM）：线上用 PerformanceObserver 收集真实用户的核心指标，上报看板。真实环境才代表真实体验。
• 回归对比：每次发版对比核心指标，劣化立即告警回滚。

// RUM 收集核心指标（简版）
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    report({ name: entry.name, value: entry.value });  // 上报到监控平台
  }
}).observe({ type: "largest-contentful-paint", buffered: true });