Skip to main content

性能分析工具

在进行性能优化之前，必须先进行性能分析。面试中常被问到：“你是如何定位性能瓶颈的？”

1. Lighthouse​

Lighthouse 是 Google 开发的开源自动化工具，内置在 Chrome DevTools 中。

  • 作用：提供网站的整体跑分，包括 Performance（性能）、Accessibility（无障碍）、Best Practices（最佳实践）和 SEO。
  • 面试点：Lighthouse 会根据 Core Web Vitals 给出具体的优化建议（如：图片未压缩、存在阻塞渲染的资源、DOM 节点过深等）。它是我们优化项目的指南针。

2. Chrome DevTools - Performance (性能面板)​

这是前端分析运行时性能最核心的工具。

  • 火焰图 (Flame Chart)：展示主线程在运行时的调用栈。向下表示函数调用关系，水平宽度表示执行耗时。
  • Long Tasks (长任务)：右上角带有红色小三角形的任务。执行时间超过 50ms 的任务被称为长任务，它们会阻塞主线程，导致页面卡顿。优化核心就是拆分长任务。
  • FPS (Frames Per Second)：绿色的条形图。如果有红色的条形，说明存在掉帧（卡顿）。
  • Summary 面板：按颜色统计耗时分布。
    • 蓝色：HTML 解析
    • 黄色：JS 执行（Scripting）
    • 紫色：样式计算和布局（Rendering）
    • 绿色：绘制和合成（Painting）

3. Chrome DevTools - Network (网络面板)​

用于分析资源加载的性能。

  • 瀑布图 (Waterfall)：
    • Queuing：请求排队时间。
    • TTFB：首字节响应时间（过长说明后端慢或网络差）。
    • Content Download：资源下载时间（过长说明资源体积大）。
  • Disable cache & 模拟弱网 (Fast/Slow 3G)：测试真实用户在首次加载和恶劣网络环境下的体验。

4. Chrome DevTools - Memory (内存面板)​

用于排查内存泄漏。

  • Heap Snapshot (堆快照)：抓取当前时刻的 V8 堆内存分布。可以通过对比两个不同时刻的快照（Comparison 视图），找出不断增加且没有被回收的对象（如未清理的 DOM 节点引用、闭包缓存）。
  • Allocation instrumentation on timeline：在时间轴上记录内存分配情况，非常直观地看到每次操作后内存是否涨了且没降下来。

5. Webpack Bundle Analyzer​

  • 作用：构建体积分析工具。
  • 应用场景：它会生成一个交互式的矩形树图，让你直观地看到打出来的 vendor.js 里面到底包含了哪些第三方库，是谁导致了包体积过大。从而进行 Tree-Shaking 检查或按需引入优化。

面试常见套路​

问：用户反馈页面越用越卡，你怎么排查？ 答：

  1. 首先怀疑是内存泄漏。打开 DevTools 的 Memory 面板，录制 Allocation timeline。
  2. 重复用户的操作，观察内存占用是否呈阶梯状上升且无法被 GC（垃圾回收）降下来。
  3. 如果是，抓取 Heap Snapshot，查看 Detached DOM tree（游离的 DOM）或者过大的 Closure（闭包）、未销毁的事件监听器。
  4. 如果内存正常，打开 Performance 面板录制操作过程，查看是否有密集的 Long Task 阻塞了主线程，或者是否存在频繁的强制同步布局（Forced Synchronous Layout）导致回流重绘。