排查页面加载性能问题的关键是组合动作：先用无痕窗口禁用缓存启动，再通过performance面板勾选disable cache、capture network、screenshots和memory，使用“刷新录制”捕获完整链路，最后联动network瀑布图与main火焰图交叉比对ttfb、fcp、domcontentloaded及长任务等时间关系定位瓶颈。
排查页面加载性能问题，关键不是看哪个面板，而是用对组合动作：从干净环境开始，同步抓取网络与主线程数据，再交叉比对时间线。
第一步：用无痕窗口+禁用缓存启动
别在普通标签页里开 DevTools —— 插件、后台脚本、缓存都会干扰结果。必须用 Ctrl+Shift+N（Mac 是 Cmd+Shift+N）打开无痕窗口，再访问目标页面。进入 Performance 面板后，点右上角齿轮图标，勾选：
• Disable cache
• Capture network （否则 Network 数据不进录制结果）
• Screenshots（看哪一帧卡顿）
• Memory（查是否内存暴涨拖慢解析）
第二步：选对录制方式——专攻加载就用“刷新录制”
想查首屏白屏、资源阻塞、JS 执行拖慢渲染，就别点红色圆点手动录。直接点左上角那个带刷新图标的按钮：Start profiling and reload page。它会从导航开始记录，自动标出 DOMContentLoaded、Load、FCP（首屏内容绘制）等关键节点，确保不漏掉 HTML 解析、CSS 加载、JS 执行的完整链路。
第三步：联动 Network 和 Main 线程找瓶颈
录制完后，先看顶部时间轴下方的 Network 横条（有请求瀑布图），再往下拉看 Main 火焰图。重点比对三组时间关系：
• 如果某个 JS 文件在 Network 里 TTFB > 500ms，说明服务端或网络慢，优化前端代码没用
• 如果 FCP 时间远晚于 DOMContentLoaded，大概率是 CSS 阻塞渲染，或关键字体/图片没预加载
• 如果某段 Script Evaluation 在 Main 线程上持续 > 50ms（即 Long Task），且起始时间紧贴某个资源完成加载，那这个资源很可能触发了重型 JS 初始化
第四步：盯住几个真实信号，别被表象带偏
• 火焰图里不是“越高越差”，而是看 红色长条是否连续占满主线程（>50ms）
• Network 瀑布图中，浅色部分（blocked + DNS + connect）过长 → 域名解析或建连慢，考虑 preconnect 或 CDN
• 某个请求下载时间（深色部分）占比特别高 → 资源体积大，优先压缩、分包、懒加载
• 多个请求排在同一个时间点之后才开始 → 存在资源依赖或串行加载，检查 <script></script> 是否缺少 async/defer，或是否误用了 document.write
