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

前言

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

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

认识 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（渲染）占比就很大

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

使用 Performance 定位性能问题

上面简单介绍了一下 Performance，在咱们获得数据以后，怎么分析？

具体的步骤以下：

点击一下具体的执行代码，咱们就能够看到相关的问题代码了

结束语

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

欢迎你们关注本公众号