性能测量与优化

学习目标

读完本课你能：为代表性页面测出加载与交互的基线数字；用性能面板把「慢」定位到具体环节；做单点优化后，既复测性能也验证业务结果没被改坏。

问题场景

「课程页感觉有点慢」。感觉没法优化——慢在哪？是数据查询、是正文里几十个代码块的语法高亮、还是资源加载？没测量就动手，最常见的结局是：加了一堆缓存、拆了一堆组件，页面还是那个速度，代码却难懂了。性能优化的第一步永远是拿到数字。

核心解释

指标先说三个（Core Web Vitals，网页性能的通用口径）：

• LCP（Largest Contentful Paint，最大内容绘制）：主内容多长时间出现——课程正文页就是正文块出现的时间；
• INP（Interaction to Next Paint，交互到下次绘制）：点按钮到界面有反应的延迟——「标记完成」「运行实验」的手感；
• CLS（Cumulative Layout Shift，累积布局偏移）：内容加载后页面跳不跳——代码块高亮后把下面的文字顶下去就是典型场景。

流程五步，顺序不能乱：

1. 选代表页面：本站选三个——课程阅读页（正文最重）、课程列表页（数据最多）、练习页（交互最重）。
2. 测基线：DevTools Performance 面板录制加载过程，记下 LCP/INP/CLS 数字。注意用 npm run build && npm run start 测——dev 模式没有优化，数字不代表生产。
3. 定位瓶颈：录制的时间线里看时间去哪了：脚本执行（语法高亮）、网络（数据量）、渲染（重排）。
4. 单点改：一次只改一个假设对应的点，别一次改三个。
5. 复测 + 业务回归：数字对比基线；然后 e2e 19 项重跑——性能优化最容易改坏业务行为（懒加载后检查题没渲染、按钮延迟绑定，都是真实可能）。

代码里也可以埋点测量，用标准 API：

// 用 PerformanceObserver 拿真实用户视角的 LCP
new PerformanceObserver((list) => {
  const entry = list.getEntries().at(-1);
  console.log("LCP:", Math.round(entry.startTime), "ms");
}).observe({ type: "largest-contentful-paint", buffered: true });

验证优化「没改业务」的硬标准：e2e 全绿 + 判分等单测全绿。性能数字变好、业务测试变红，这次优化就是失败的。

示例拆解

一次符合流程的真实优化记录长这样（数字示意）：

页面：/learn/r08-state-snapshot/main（阅读页）
基线：LCP 2.8s（时间线里代码块语法高亮脚本执行占 1.1s）
假设：正文一次性高亮全部代码块，阻塞了主线程
改动：高亮逻辑保持不变，仅把首屏外代码块的高亮推迟（requestIdleCallback）
复测：LCP 1.9s
业务回归：node scripts/e2e-core.mjs → 19/19
        （含「正文代码块渲染」「语法高亮生效」两项，正好盯住被改的环节）
结论：采纳；数字与回归结果记入文档

关键点：改动前的假设来自测量（高亮占了 1.1s，不是猜的）；改动是单点（只动高亮时机，不动高亮库）；回归挑的就是会受影响的检查——E03 铺垫的 19 项在这里变成安全网。个人工作台量级小，别过度优化：先看数字疼不疼，再决定动不动。

动手任务

1. 用 build + start 启动本站，DevTools 录制阅读页加载，记下 LCP 数字和时间都花在哪——这是你的基线。
2. 找一个真实的小瓶颈做单点优化（比如给代码块预留最小高度防 CLS），复测对比基线。
3. 优化后完整跑 e2e 确认全绿；把「基线 → 改动 → 复测 → 回归」四步记成一段文档。

常见错误

• 在 dev 模式测性能：未优化的开发构建，数字全失真，结论全是错的。
• 一次改多个点：数字变了说不清哪个起效，坏了也说不清谁干的——一次一个假设。
• 只看加载不看交互：LCP 好了但「标记完成」点了没反应（INP 差），用户照样觉得卡。
• 优化改坏业务：懒加载让检查题晚出现，答题流程受影响——没有 e2e 安全网就发现不了。

检查与复盘

• 三个代表页面都有基线数字（至少测过 LCP）
• 每次优化都是「测量 → 假设 → 单点改 → 复测 → 业务回归」的完整闭环
• 数字与回归结果有留档，下次优化能对比

参考资料

• web.dev：Core Web Vitals —— LCP/INP/CLS 的官方定义与阈值
• Chrome DevTools：Performance —— 录制与时间线分析
• MDN：Performance API —— PerformanceObserver 等标准测量接口