前言
前端性能，这是一个很大也很有趣的一块，是每个前端工程师不可避免的问题，所以这个系列会慢慢地探讨一些关于性能方面的问题。最近也接触到一些性能方面的调试以及优化的工作，纸上得来终觉浅，绝知此事要躬行。
竟然是性能优化，首先第一步就应该是性能调试，发现我们页面性能的问题，这篇文章属于入门级别的，话不多说，进入正题
认识 Chrome Performance
performance 的前世就是之前的 timeline（好吧，我错过了这个时代） 如果你真的找不到的话，可以检查下浏览器的版本，说不定是版本的问题，我的是最新的，所以肯定没有问题
在 Chrome 中，我们打开 Chrome 调试面板，进入 performance 界面。如下所示，按照步骤来
解释下： 第二步：screenshots 是对你的屏幕进行截图，后面会生成相关的比较直观的截图 第四步：模拟 CPU 速度，更加方便你重现问题，如果 4x slowdown 不行，你可以选择 6x slowdown
我们可以看到左上侧的位置有几个重要按钮，其作用如下：
我们点击重新录制，就会出现：
完成之后就会出现以下的界面，这里都是我们应该重点关注的内容
先来看看有哪些部分：
- 第一部分：controls，上面已介绍
- 第二部分：重要参数，这一部分我们称之为 Overview 窗格，我们可以看到 FPS， CPU， NET在页面加载时候的变化。
- FPS：每秒帧数，绿色竖线越高， FPS 越高，我们应该关注红色部分，这说明我们的页面很可能出现卡顿现象，另外 60 是一个比较理想的值
- CPU: CPU 资源
- NET: 每条彩色横杆代表一种资源，横杆越长，检索资源所需要的事件越长
- 横轴表示加载的时间
- 纵轴表示事件（线程）的执行顺序，先是上面的执行再到下面的，我们要特别注意红色的三角行部分
使用小提示：第二、三、四部分都是联动的，比如你选择火焰图中的某个部分，下面的 Summary 就会显示这个部分的总结
使用 Performance 定位性能问题
上面简单介绍了一下 Performance，在我们得到数据之后，怎么分析？
具体的步骤如下：
点击一下具体的执行代码，我们就可以看到相关的问题代码了
结束语
上面我们只是介绍了怎么定位性能问题，接下来怎么优化，这是一个很大的问题，接下来会慢慢的在这个系列中总结归纳！
本文分享自微信公众号 - 前端杂货铺（gh_9013e08e595a），作者：GpingFeng
原文出处及转载信息见文内详细说明，如有侵权，请联系 yunjia_community@tencent.com 删除。