Chrome DevTools 性能分析怎么做？

Chrome DevTools 性能分析怎么做？

用 Performance 面板录制页面活动，从火焰图找长任务，用 Bottom-Up 定位耗时函数，配合 Network 排查资源瓶颈——这是核心路径。

Performance 面板：录制和读火焰图

点击 Record 后操作页面，再停止录制。火焰图横轴是时间，纵轴是调用栈，关键看三行数据：

• FPS 图：红色块表示掉帧，绿色柱越高越流畅
• Main 线程：宽条是长任务（>50ms），点进去看 Scripting/Rendering/Painting 各占多少
• Timings 标记：直接显示 FCP、LCP、DCL 等关键节点

用 Bottom-Up 按 Self Time 排序，快速找到吃 CPU 最多的函数。

Network 面板：找慢请求

按 Duration 列排序，定位最慢的接口和资源。瀑布图里看关键资源是否阻塞渲染——render-blocking 的 JS/CSS 没加 async/defer，LCP 就会被拖慢。

Memory 面板：查内存泄漏

拍堆快照，操作页面后再拍一次，对比 Delta 列。某类对象持续增长不释放，大概率是泄漏。也可用 Allocation Timeline 实时观察分配。

Lighthouse：一键出报告

Lighthouse 给出 Performance/Accessibility/SEO/Best Practices 四项评分和建议，适合快速体检，深度分析还得靠 Performance 面板。

实战流程

开启 CPU 4x slowdown + Network Fast 4G 模拟真实环境 → Record and reload 录制加载过程看 LCP 阻塞 → 交互场景用普通 Record 找长任务 → Bottom-Up 定位函数 → 优化后重录对比。

追问：怎么判断一个长任务是否需要拆分？ 超过 50ms 的任务阻塞主线程响应用户输入，用 requestIdleCallback 或 setTimeout(fn, 0) 拆成小块，让浏览器有机会处理渲染和交互。