Chrome 性能监测

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

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

Performance

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

使用 Performance 以前，咱们须要先打开 Chrome 的无痕模式，由于，身为开发者，Chrome 上通常都有着大量的 Chrome 插件，而 Chrome 插件会显著影响页面的性能。因此，咱们须要进入无痕模式来规避 Chrome 插件对页面性能的影响。

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

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

拿到 Performance 性能报告，首先，咱们先看顶部的三个数据：FPS、CPU 以及 NET。

1. FPS：主要和动画性能有关，表明每秒帧数。图表中的绿色长条越高，说明FPS越高，用户体验越好。若是其中有红色长条，表明着这部分帧数有卡顿，须要优化。
2. CPU：和底部的 Summary 对应，显示了页面加载过程当中，各阶段对 CPU 的占用时间，占用时间越多，表明该阶段越须要优化。在 Performance 中，该部分是最须要关注的指标之一。
3. NET：主要展现了网络请求的前后顺序以及各自的请求耗时，能够被 Network 面板完美替代，建议直接查看 Network。

接下来，咱们来了解一下最杂乱的中间部分，通常状况下，咱们主要根据中间部分中 Main 的图表来分析页面性能。

因为 Main 的图表长得像一团团倒立的火焰，因此，咱们将其称为火焰图。它展示了主线程在 Record 过程当中作的全部事情，包括：Loading、Scripting、Rendering、Painting 等等。火焰图的横轴表明着时间，纵轴表明着调用堆栈。每个长条表明执行了一个事件或函数，长条的长度表明着耗时的长短，若是某个长条右上角是红色的则表示该函数存在性能问题，须要重点关注。

活用 Performance，按照 Chrome 的提示进行优化，能够解决掉绝大部分的性能问题。

Performance monitor

看起来，Performance 提供的性能监测功能已经较为完备，可是，它有两个问题：

1. 数据缺乏实时性
2. 数据面板过于复杂，不够直观

为了解决这两个问题，Chrome 提供了 Performance monitor 功能，以实时直观的数据展现页面性能。

相比 Performance ，Performance monitor 所在的位置较为隐蔽，须要如下几个步骤才能打开：

1. 打开 Chrome 开发者工具
2. 按“Esc”，打开附加面板
3. 点击选项按钮，打开选项菜单
4. 选择“Performance monitor”

因为 Performance monitor 是实时的，因此，进入面板后，Performance monitor 将会自动运行，记录页面性能数据，经过点击左侧的选项，能够调整记录的数据类型。

相比 Performance，Performance monitor 的功能虽然不够全面，但胜在简洁、实时。一般状况下，能够经过 Performance monitor 来分析页面使用过程当中的性能问题，例如：动画性能等。

Audits

虽然 Performance 以及 Performance monitor 提供了大量性能数据，可是，若是开发者经验不足，复杂的性能数据无异于天书。那么，Chrome 能不能自动分析出页面的性能缺陷，给出具体的性能优化点呢？万幸，Chrome 提供了 Audits。

Audits 源于著名的开源自动化分析插件——Lighthouse，Lighthouse 不只可以分析页面性能，还可以对 PWA、无障碍访问、SEO 等进行测试评分，并给出优化建议。为了方便开发者使用，在 Chrome 60 版本，Chrome 开发团队直接将其加入 Chrome 开发者工具中的 Audits 面板中。

Lighthouse 转正以后，使用该功能不须要安装额外的 Chrome 插件，只须要进入 Audits 面板，点击 Run audits 按钮便可生成一份页面分析报告，以下所示：

经过结果能够看到，Audits 不只可以自动分析出页面的缺陷，还能根据缺陷给出具体的优化建议。这就意味着，使用了 Audits 以后，咱们只须要按照 Audits 给出的优化建议逐条尝试，便可大幅度提升页面性能，实乃前端偷懒神器~

彩蛋

以前咱们一直说的是基于 Chrome 浏览器的性能监测方案，可是，其实还有一种不基于浏览器的性能监测方案：编程式性能监测。

编程式性能监测主要依托于 W3C 推出的 Performance API，该套 API 的目的是简化开发者对网站性能进行精确分析与控制的过程，方便开发者采起手段提升 web 性能。

相比以前的性能监测方法，Performance API 最大的优势是：灵活、精确，因此一经推出便风靡全球。好比，Vue 中便封装了 Performance API 方便开发者进行性能追踪。

因为篇幅有限，在此再也不赘述，有兴趣的同窗能够自行了解。

总结

性能监测是前端性能优化的第一步，只有学会了性能监测，咱们才能更好地剖析性能问题，直至完全解决性能问题。