Web性能优化系列之一工具篇

WEB性能优化，是前端不可避免的问题，值得拿来好好思考一番，然后搞明白：

• 为什么需要考虑这个问题
• 如何去衡量这个问题
• 如何解决这个问题

每个人都有自己的对问题的思考方式和路径，今天不妨就按照我的思路走一走吧。

虽然，这篇文章的标题突出的是工具，但具体阐述这个问题之前，先回答：为什么需要考虑这个问题？答案，因为WEB性能差，用户体验差...

为了提高面对WEB应用时的用户体验，我们决定对WEB应用的性能进行优化。

• A: 优化什么？
• B: 哪里有问题，优化哪里呀
• A: 哪里有问题？
• B: 你查查看呀
• A: 怎么查？
• B: 我不知道呀

看来进行优化之前，关键是找到问题在哪里，对症下药，才是WEB性能优化的准绳。那么就需要借助一些工具来帮助我们发现问题啦。今天只介绍一款工具：Chrome DevTools 的 Performance 面板（以前叫做Timeline）。

Performance 面板的组成

说明：这部分内容最初翻译自chrome的开发者文档，但是已经有中文文档啦，所以更详细的内容可以查看这里：如何使用 Timeline 工具，下面简要的介绍一些该工具的基本信息。

该面板由四部分组成：

1. Controls：包含控制键：记录、停止记录、记录哪些内容选项
2. Overview：统观全局
3. Flame Chart：CPU堆栈可视化（包含所有事件，为Overview中的CPU部分）
4. Details：事件详细分析

在Flame chart中有三条垂直的虚线，它们分别代表：

• 蓝色代表DOMContentLoaded事件
• 绿色代表开始绘制（paint）的时间
• 红色代表load事件

当选择某事件，detail则显示与该事件相关的信息；否则显示所示时间范围内的相关信息。

Performance 记录的内容

前面提到Performance原来叫Timeline，说明使用这个面板可以记录一条时间线，稍微准确一点说，记录的是一条事件时间线。
当页面加载，或者用户和页面发生了交互，总会有一系列的事件发生，这些事件是属于浏览器的事件：浏览器要加载资源，解析HTML，解析CSS，执行JS，绘制，布局，回流，组合绘制，调用GPU等等。所有这些操作，都以事件的形式暴露出来，最终形成一条事件时间线。当我们沿着这条线索去分析网页加载、交互过程中的时间损耗的时候，就能找到是什么导致WEB应用加载慢或卡顿了。
啊哈，查看这里：时间线事件参考，你就知道所有的事件啦。如果很好奇，现在就F12打开浏览器（chrome浏览器，或者chrome内核的浏览器）的开发者工具，然后切换到Performance面板下，记录一段网页交互操作的时间线，然后看看都有哪些事件出现了吧。

后记

现在是不是大概知道怎么去发现影响WEB性能的原因了呢？定量的衡量时间损耗，可以帮助我们定位问题，从而刨根问底，最终把问题定位到代码中。

参考资料

请不要忽视上面提到的参考资料哦：

• 如何使用 Timeline 工具
• 时间线事件参考