前端性能优化《一》——Chrome Performance 页面性能调试

前言

前端性能，这是一个很大也很有趣的一块，是每个前端工程师不可避免的问题，所以这个系列会慢慢地探讨一些关于性能方面的问题。最近也接触到一些性能方面的调试以及优化的工作，纸上得来终觉浅，绝知此事要躬行。

竟然是性能优化，首先第一步就应该是性能调试，发现我们页面性能的问题，这篇文章属于入门级别的，话不多说，进入正题

performance 的前世就是之前的 timeline（好吧，我错过了这个时代）如果你真的找不到的话，可以检查下浏览器的版本，说不定是版本的问题，我的是最新的，所以肯定没有问题

在 Chrome 中，我们打开 Chrome 调试面板，进入 performance 界面。如下所示，按照步骤来

解释下：第二步：screenshots 是对你的屏幕进行截图，后面会生成相关的比较直观的截图第四步：模拟 CPU 速度，更加方便你重现问题，如果 4x slowdown 不行，你可以选择 6x slowdown

我们可以看到左上侧的位置有几个重要按钮，其作用如下：

我们点击重新录制，就会出现：

完成之后就会出现以下的界面，这里都是我们应该重点关注的内容

先来看看有哪些部分：

第一部分：controls，上面已介绍
第二部分：重要参数，这一部分我们称之为 Overview 窗格，我们可以看到 FPS， CPU， NET在页面加载时候的变化。
1. FPS：每秒帧数，绿色竖线越高， FPS 越高，我们应该关注红色部分，这说明我们的页面很可能出现卡顿现象，另外 60 是一个比较理想的值
2. CPU: CPU 资源
3. NET: 每条彩色横杆代表一种资源，横杆越长，检索资源所需要的事件越长
第三部分：火焰图
1. 横轴表示加载的时间
2. 纵轴表示事件（线程）的执行顺序，先是上面的执行再到下面的，我们要特别注意红色的三角行部分
第四部分：Summary 部分，可以看到 CPU 中中的资源分配，比如下图中的 Rendering（渲染）占比就很大

使用小提示：第二、三、四部分都是联动的，比如你选择火焰图中的某个部分，下面的 Summary 就会显示这个部分的总结

上面简单介绍了一下 Performance，在我们得到数据之后，怎么分析？

具体的步骤如下：

点击一下具体的执行代码，我们就可以看到相关的问题代码了

上面我们只是介绍了怎么定位性能问题，接下来怎么优化，这是一个很大的问题，接下来会慢慢的在这个系列中总结归纳！