返回

火眼金睛追踪卡顿之 Performance 指南

前端

要是浏览器性能检测有个“马甲”，那 Performance 绝对当之无愧。了解性能优化应该有不少小伙伴会用过 Performance，但你是否知道它的强大之处？今天就来全面剖析它，带你开启顺畅“冲浪”之旅。

了解 Performance

以 Chrome DevTools 中的 Performance 为例，它主要包含以下几块区域：

  1. Summary 概览区： 概括性展示页面加载过程关键指标，比如页面加载时间（Load）、解析 DOM 树时间（DOM Parsing）、执行 JS 脚本时间（JS Execution）。
  2. Filmstrip 胶片区： 以时间轴的形式，展现页面加载过程中关键时刻的屏幕截图。
  3. Main 内容区： 以瀑布流的形式，详细展现页面资源加载过程，以及各种耗时操作的信息。
  4. Bottom 工具区： 提供控制面板和过滤选项，方便灵活地查看性能数据。

了解渲染过程

网页从输入 URL 到最终呈现到屏幕上，经历了复杂的渲染过程，这个过程大致可分为以下几个步骤：

  1. 解析 HTML： 浏览器首先会解析 HTML 代码，构建 DOM 树。
  2. 解析 CSS： 浏览器也会解析 CSS 代码，构建 CSSOM 树。
  3. 合并 DOM 与 CSSOM： 浏览器将 DOM 树与 CSSOM 树合并，生成渲染树。
  4. 布局： 浏览器根据渲染树计算出每个元素的位置和大小。
  5. 绘制： 浏览器将计算好的元素绘制到屏幕上。

精确定位问题

如果你的页面出现了卡顿问题，你可以通过以下几个步骤来定位问题：

  1. 分析 Summary 概览区： 查看页面加载时间、解析 DOM 树时间、执行 JS 脚本时间等关键指标，看看是否有什么异常。
  2. 查看 Filmstrip 胶片区： 看看卡顿是否发生在特定的时刻，然后结合 Main 内容区找到对应的时间段，查看详细信息。
  3. 分析 Main 内容区： 查看资源加载情况，看看是否有加载缓慢的资源，或者是否有过多的资源请求。
  4. 使用 Bottom 工具区： 过滤出特定的资源类型或时间段，以便更详细地分析。

全面解决办法

一旦你找到了卡顿问题的原因，就可以采取相应的措施来解决问题：

  1. 优化资源加载： 对于加载缓慢的资源，可以考虑使用 CDN、压缩、缓存等技术来优化加载速度。
  2. 减少资源请求： 减少页面上不必要的资源请求，可以提高页面加载速度。
  3. 优化 JS 脚本执行： 对于执行时间过长的 JS 脚本，可以考虑使用代码拆分、异步加载、延迟加载等技术来优化执行速度。
  4. 使用合适的浏览器渲染引擎： 不同浏览器的渲染引擎可能会对页面的性能产生影响，可以根据实际情况选择合适的浏览器渲染引擎。

结语

卡顿是页面性能优化的常见问题，通过合理应用 Performance，了解其工作原理，同时辅以其它经验方法，基本可以解决大多数页面卡顿问题。