前端性能优化体系

4. 渲染路径长

• SSR / SSG 让 HTML 直达，减少客户端渲染等待
• 流式渲染（React renderToPipeableStream）让首屏更早吐出
• 骨架屏改善感知性能（不改善真实指标，但要诚实标注这一点）

三、交互性能（INP）

INP 差的根因通常是主线程被长任务占住。判定标准：单次任务超过 50ms 即为长任务。

定位：Performance 面板看主线程火焰图，找最长的黄色块；或用 PerformanceObserver 线上采集：

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) report("longtask", entry.duration);
  }
}).observe({ type: "longtask", buffered: true });

优化手段：

1. 拆分长任务：把大循环切成小片，用 scheduler.yield()（或 setTimeout 兜底）让出主线程。

async function processInChunks(items: string[]) {
  for (let i = 0; i < items.length; i++) {
    handle(items[i]);
    if (i % 50 === 49) await scheduler.yield(); // 让浏览器有机会响应输入
  }
}

2. 减少不必要的渲染：React 场景见 常用的性能优化操作。
3. 重活挪出主线程：Web Worker 处理解析、加密、大数组计算。
4. 避免强制同步布局：读写分离，不要在循环里交替读 offsetHeight 和写 style。

// ✗ 每次都强制重排
for (const el of els) { el.style.width = el.offsetWidth + 10 + "px"; }

// ✓ 先批量读，再批量写
const widths = els.map((el) => el.offsetWidth);
els.forEach((el, i) => { el.style.width = widths[i] + 10 + "px"; });

四、渲染稳定性（CLS）

• 图片、视频、iframe 必须写死宽高或 aspect-ratio
• 广告位、动态插入的横幅预留占位
• 字体加载导致的文本重排：用 size-adjust 匹配回退字体度量
• 不要用 top/left 做动画，用 transform（合成层，不触发布局）

五、内存

泄漏的典型来源：未解绑的事件监听、未清理的定时器、闭包持有大对象、Detached DOM（DOM 删了但 JS 还引用着）。

排查：DevTools Memory 面板拍两次堆快照（操作前 / 操作后），对比 Detached HTMLElement 与不断增长的构造函数实例数。

// 组件卸载时务必清理
useEffect(() => {
  const id = setInterval(tick, 1000);
  window.addEventListener("resize", onResize);
  return () => {
    clearInterval(id);
    window.removeEventListener("resize", onResize);
  };
}, []);

六、RN 性能（另一套指标体系）

RN 没有 LCP/INP，关注点是启动、滚动、交互。

详细实践见 优化 APP 启动速度。核心思路与 Web 一致：先测量分段耗时，再针对最长的一段优化。

七、优化方法论（面试最容易被追问的部分）

1. 不要优化没有被测量的问题。先有基线，再谈收益。
2. 一次只改一个变量，否则无法归因。
3. 区分真实性能与感知性能，汇报时说清是哪一个。
4. 收益要用数据说话：优化前后各跑 3 次取中位数，说明采集环境。
5. 关注长尾：P75 才是 Core Web Vitals 的评估口径，平均值会掩盖慢用户。

八、常见追问

• 白屏时间怎么测？（FCP、首屏模块加载完成、performance.mark 打点）
• 首屏优化你做过哪些？效果如何量化？
• preload / prefetch / preconnect / dns-prefetch 的区别？
• 为什么说"减少重排"比"减少重绘"更重要？（重排会重建布局树，代价高一个量级）

参考

• web.dev · Core Web Vitals
• MDN · PerformanceObserver