Skip to main content

Chrome DevTools 高级排查

在高级前端面试中，DevTools 不再只是用来看 console.log 和 Network 请求的工具，更是性能调优和内存泄漏排查的利器。

性能调优 (Performance 面板)​

当用户反馈页面卡顿、动画掉帧时，Performance 面板是唯一的解法。

  • 录制与火焰图 (Flame Chart)： 点击 Record 录制一段交互过程。主线程 (Main) 的火焰图是自上而下的函数调用栈。
  • 定位 Long Task (长任务)： 在火焰图中，如果一个任务的执行时间超过 50ms，它的右上角会被标红，这就是导致主线程阻塞、页面掉帧的罪魁祸首。
  • Bottom-Up 与 Call Tree： 在火焰图中找到 Long Task 后，可以在 Bottom-Up 面板中按照 Self Time（函数自身执行时间，不包含调用子函数的时间）降序排列，精准定位到是业务代码里的哪个循环或递归拖慢了性能。
  • FPS 监控： 绿色的柱状图代表帧率，如果出现红色的长条，说明这一帧耗时过长，发生了掉帧。

内存泄漏排查 (Memory 面板)​

如果页面长时间运行后越来越卡，甚至崩溃（OOM），通常是发生了 JS 内存泄漏（闭包未释放、DOM 节点游离、事件监听未销毁）。

  • Heap Snapshot (堆快照)： 在页面刚加载时拍一张快照，进行一系列交互后回到初始状态，再拍一张快照。
  • 比对快照 (Comparison)： 将视图切换为 Comparison 模式，比对两张快照中对象的增减。重点关注 Detached DOM tree（游离的 DOM 节点，说明 DOM 被从文档流移除了，但 JS 里还有变量引用着它，导致无法被垃圾回收）。
  • Allocation Instrumentation on timeline： 录制一段操作期间的内存分配时间线，蓝色的柱子代表新分配的内存，如果最终没有变成灰色（被回收），说明发生了泄漏。

Core Web Vitals (Lighthouse 面板)​

用于跑出 Google 官方的 Web 核心性能指标得分：

  • LCP (Largest Contentful Paint)：最大内容绘制时间，衡量加载性能（应 < 2.5s）。
  • FID (First Input Delay) / INP (Interaction to Next Paint)：衡量交互响应速度。
  • CLS (Cumulative Layout Shift)：累积布局偏移，衡量视觉稳定性（比如图片突然加载出来把文字顶下去了）。