Chrome DevTools性能分析需四步：Network看请求耗时，Performance查主线程卡顿，Console/Sources辅助验证，Memory排查内存泄漏。各面板配合使用，以数据驱动优化。
直接用 Chrome DevTools 分析页面运行，核心是选对面板、配对环境、抓准时机。不用猜，靠数据说话。
Network 面板：看资源怎么“跑”起来
这是最直观的起点，反映页面加载时所有网络请求的真实表现。
- 打开 DevTools（Ctrl+Shift+I 或右键 → 检查），切换到 Network 标签
- 勾选 Disable cache，避免缓存干扰；启用 Preserve log，尤其对单页应用（SPA）跳转分析很关键
- 在 Throttling 中选 Fast 3G 或自定义限速，模拟真实弱网场景
- 刷新页面后，观察瀑布图：找横向特别长的请求条——它可能 DNS 慢、连接卡、下载大或被阻塞
- 点击可疑请求，在 Timing 标签里看各阶段耗时：blocked（排队）、dns（解析）、connect（建连）、ttfb（首字节时间）、content download（下载）——哪一段突出，就往哪一类原因查
Performance 面板：看主线程怎么“忙”起来
它记录从页面加载到交互全过程的 CPU、渲染、内存行为，告诉你“为什么卡”，不只是“哪里慢”。
- 切到 Performance 面板，点击 Start profiling and load page（带刷新图标的圆形按钮），自动重载并全程录制
- 务必勾选 Screenshots 和 Memory，前者帮你定位卡顿帧，后者可识别内存异常增长
- 录制结束后，重点看顶部 Overview 区的三行图表：FPS（红块=掉帧）、CPU（高负载区）、NET（资源加载时间线）
- 下方 Main 火焰图是核心：纵向是调用栈，横向是时间。拖选一段长任务（>50ms 的紫色/黄色块），右侧 Summary 会显示具体函数、耗时、调用路径
- 常见瓶颈：强制同步布局（Forced Layout）、过多重排重绘、长 JavaScript 执行、大量 DOM 查询
Console 和 Sources 面板：辅助验证与调试
它们不直接生成性能数据，但能快速验证问题是否存在、是否修复。
- Console 里留意 Warning 和 Error：比如 “Avoid large layout shifts”、“Long task” 提示，常对应 Performance 中的 Layout Shift 或 Main 线程阻塞
- Sources 面板可设置断点，配合 Performance 录制中定位到某次长任务的 JS 执行位置，直接查看上下文代码
- 在 Console 输入
performance.getEntriesByType('navigation')或performance.getEntriesByType('resource')，可手动获取导航和资源的详细性能指标（如 TTFB、loadEventEnd）
Memory 面板：查“越用越卡”的隐性问题
适合怀疑内存泄漏或频繁 GC 导致卡顿的场景，比如长时间操作后页面变 sluggish。
- 在 Performance 录制时已勾选 Memory，就能看到 JS Heap 曲线；若出现锯齿状陡升陡降，说明频繁垃圾回收
- 单独进 Memory 面板，点击 Take heap snapshot，对比不同操作前后的快照，用 Comparison 视图看哪些对象没被释放
- 重点关注 Detached DOM tree、未清理的事件监听器、闭包中意外保留的大对象
