前端性能优化《一》——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（渲染）占比就很大

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

 

使用 Performance 定位性能问题

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

具体的步骤如下：

 

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

 

结束语

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

本文分享自微信公众号 - 前端杂货铺（gh_9013e08e595a），作者：GpingFeng

原文出处及转载信息见文内详细说明，如有侵权，请联系 yunjia_community@tencent.com 删除。