应使用无痕窗口（Ctrl+Shift+N/Cmd+Shift+N）打开目标页，禁用缓存，点击Reload page and record按钮完整录制页面生命周期，结合Network面板联动分析TTFB、FCP等关键指标定位真实瓶颈。
Performance 面板怎么打开才靠谱
直接按 F12 打开 DevTools 后切到 Performance 标签页，但这样容易被缓存、扩展或后台脚本干扰。真实性能问题往往只在干净环境下暴露——必须用隐身窗口（Ctrl+Shift+N / Cmd+Shift+N），且勾选 Disable cache（在 Performance 面板左上角录制按钮旁的齿轮图标里）。
常见错误是开着一堆插件跑分析，结果看到的 long task 其实来自广告脚本，不是你自己的代码。
点哪个录制按钮才能抓到关键数据
别手动点红色圆点再等几秒——那只能捕获片段，漏掉页面加载起点。应该点左上角第二个按钮：Reload page and record（带刷新图标的那个）。它会自动触发完整页面生命周期：从导航开始、解析 HTML、执行 JS、渲染帧，全链路记录。
这个模式下，DOMContentLoaded 和 Load 时间点会自动标出，还能看到首屏内容何时真正可读（First Contentful Paint）。
立即学习“前端免费学习笔记（深入）”；
火焰图里哪些颜色和标记真该盯住
火焰图不是看谁高，而是看谁“红”、谁“长”、谁“堵”：
-
红色长条在 Main 线程上持续 > 50ms → 是long task，主线程卡死，用户操作必然延迟 -
紫色块密集堆叠→ 渲染（Rendering）耗时异常，大概率是强制同步布局（layout thrashing）或频繁getComputedStyle -
GPU Process区域持续高占用 → 检查是否滥用transform: translateZ(0)或will-change，或 Canvas/WebGL 调用没节流 - 帧率曲线（FPS）掉到
40以下的区间 → 对应下方 Frames 区域里绿色方块变窄甚至断裂，说明动画掉帧
Network 和 Performance 怎么联动看瓶颈
单看 Performance 容易误判——比如主线程空闲但页面就是慢，这时得立刻切到 Network 面板，按 Ctrl+E（或点击录制按钮旁的刷新图标）重新加载并同步记录。
重点比对两个时间点：
-
TTFB（Time to First Byte）> 500ms → 问题在服务端或网络，Performance 里再优化 JS 也没用 -
First Contentful Paint时间远大于DOMContentLoaded→ 可能是 CSS 阻塞渲染，或关键资源没预加载（<link rel="preload">缺失） - 某个
.js文件在 Network 里加载花了 1.2s，而 Performance 里它执行又占了 800ms → 这个文件就是双重瓶颈，得拆包 + code-splitting
最常被忽略的是：Performance 录制默认不包含网络请求的详细时间线（比如 DNS、TLS 握手），必须在录制前点齿轮图标，勾选 Capture network conditions，否则你永远不知道慢是卡在连服务器还是跑代码。
