本文目录
交通调度中心不会只看“今天平均车速”，而会沿时间轴找出哪一段道路堵住了哪一辆车。浏览器性能排障也一样：页面卡顿、首屏慢、点击延迟和内存增长是现象，不是原因。Performance 面板的价值，是把事件、脚本、布局、绘制和网络放到同一段时间里对照。
先分类：慢在哪里
先把“慢”分成不同现象，工具才会给出可行动的证据。
打开页面时“慢”，可能是服务器慢、资源下载慢、脚本解析慢、主线程被长任务占满，也可能是首屏已经画出但字体或图片晚到。滚动卡顿更可能和输入、脚本、布局或绘制有关；点击没有反应则要看事件前是否存在长任务。
button.addEventListener('click', () => {
const start = performance.now()
while (performance.now() - start < 120) {}
console.log('工作结束')
})这段代码没有网络，却能让点击后页面卡住。Network 面板如果一片空白，也不代表性能没有问题；主线程可能正在执行同步循环。
Main Thread 和 Long Task
Performance 录制后，先看 Main Thread（主线程）时间线。长条脚本、事件、样式和布局会解释“浏览器为什么没机会响应”。Long Task（长任务）通常指持续时间超过约 50 毫秒、可能影响交互的主线程任务，它不是某个 JavaScript API，而是浏览器从用户体验角度标出的线索。
点击处理器、Promise 回调、定时器和 rAF 都可能成为长任务。把工作放进 Promise 不会让 CPU 计算自动离开主线程；把它拆成多个微任务也可能在微任务检查点连续执行，仍然挡住渲染和输入。
看事件、样式和布局的相邻关系
如果点击后先出现很长的 Event，再出现脚本和 Layout，先查事件处理器；如果脚本之后有大量 Recalculate Style 和 Layout，回到上一章的 DOM 读写顺序；如果绘制很重，检查大面积阴影、滤镜、图片和频繁变化的像素。
performance.mark('search-start')
updateList()
performance.mark('search-end')
performance.measure('update-list', 'search-start', 'search-end')自定义 mark 和 measure 能把业务动作标在时间线上。它们不替代面板，但能让“用户点击搜索”与后面的布局、绘制和网络完成对齐，而不是只凭感觉说“应该是 Vue 慢”。
Network 瀑布图不等于页面卡顿图
Network 的瀑布图适合看 DNS、连接、请求排队、响应头、正文下载和缓存命中。一个请求耗时 2 秒，可能是服务器等待；也可能正文早已到达，但 JS 解析和渲染用了另外 2 秒。反过来，页面卡顿时也可能没有任何请求。
关注响应的 cache 状态、TTFB（首字节时间）、内容大小和阻塞关系；再回到 Performance 看请求完成后是否触发昂贵脚本。不要只看到一条最长请求就宣布“网络是瓶颈”，也不要只看脚本耗时就忽略服务器和缓存。
输入延迟和布局偏移
Event Timing 可以帮助观察输入从发生到处理的延迟；布局偏移则说明页面元素在用户看到后又突然移动。用户说“按钮点了没反应”，可能是主线程被长任务挡住，也可能是按钮被布局变化移走；用户说“页面一闪”，可能是资源、字体或尺寸信息晚到。
Performance 面板里的体验指标是线索，不是通过或失败的魔法分数。真实设备、网络和交互顺序决定了结果。用同一复现步骤录制，才有比较意义。
内存快照要找 retaining path
页面越用越卡，可能是内存增长，也可能是 CPU 长任务。Memory 面板的快照中，retaining path（保留路径）告诉你对象为什么仍然从 GC root 可达：事件监听器、定时器闭包、全局数组、模块单例和 Worker 消息都可能成为路径。
const cache = []
function keepLargeObject(value) {
cache.push(value)
}这个例子不是说缓存一定错误，而是提醒你问：数组有上限吗？何时清空？对象是否真的需要整个生命周期？内存快照显示的是某一刻的图，不等于立刻证明“泄漏”，要重复操作、比较快照并结合生命周期观察。
从现象反推机制
点击延迟：先找 Main Thread 长任务和事件前的脚本。滚动掉帧：看输入、rAF、布局和绘制是否在同一帧堆叠。首屏慢：按 Network、解析、脚本、样式、字体和图片逐层排查。页面越用越卡：比较多次快照，找不断增长的 retaining path。
反推不是凭关键词跳结论。Performance 记录的是时间线，Network 记录请求，Memory 记录可达图；它们回答不同问题。把三张图硬拼成一张“所有慢都一样”的地图，会把修复方向带偏。
Lighthouse 能做什么，不能做什么
Lighthouse 可以提供一组标准化审计和实验指标，适合发现图片过大、阻塞资源、无障碍或缓存配置问题。但它是一次特定环境的测量，不能替代真实用户设备、真实网络、真实点击路径和 Performance 复现。
如果用户反馈“后台切回后第一次点击很卡”，而你的 Lighthouse 全绿，应该优先录制这个具体流程。工具分数和问题机制不是竞争关系；分数提示方向，时间线证明原因。
容易踩的坑
看到 Long Task 还要展开调用栈并关联用户动作，不能只盯火焰图上的一块红。Network 里最久的请求也不一定是体感瓶颈——可能被缓存、并行，或根本不挡首屏。内存上涨更不等于泄漏：缓存、图片解码和浏览器预留都会暂时抬高。Lighthouse 满分同样救不了真机卡顿。