Chrome 性能监测

前端性能优化一直是前端工作中必不可少的一部分，但是我们如何知道哪些部分的性能有优化的空间呢？此时，Chrome 性能监测就派上用场了。

正所谓：知己知彼，百战百胜，只有确定了性能瓶颈，才能有条不紊地进行前端性能优化工作。

Performance

Performance 是 Chrome 开发者工具中的一个功能，用于记录网页从初始化到运行时的所有性能指标。

使用 Performance 之前，我们需要先打开 Chrome 的无痕模式，因为，身为开发者，Chrome 上一般都有着大量的 Chrome 插件，而 Chrome 插件会显著影响页面的性能。所以，我们需要进入无痕模式来规避 Chrome 插件对页面性能的影响。

进入无痕模式后，我们打开需要进行性能监测的网站，开启 Chrome 开发者工具，点击 Performance 选项卡，进入面板。此时的面板什么都没有，只有几个操作提示。

接下来，我们点击左上角的 Record（小圆点）按钮，Performance 进入 Record 阶段，从此刻开始，它会记录用户的交互以及这些交互对页面性能数据的影响。当交互完成后，点击 Stop 来停止 Record ，Performance 面板会展示出刚才录制的页面性能数据。如下所示：

拿到 Performance 性能报告，首先&