手把手教你看懂Chrome火焰图！（调试性能必备）

性能优化的目的

我们每一次的UI的变化，都要经历以下步骤：

我们都知道像素管道有五步，JavaScript->样式计算->布局->绘制->合成。

人的眼睛大约每秒可以看到 60 帧，那么就代表我们每 16.7ms 就要看到 1 帧，一帧就要经历上图的 5 步，说明我们的每一个任务（task） 不宜过长，这样就会导致用户对于界面感知的不友好性

• fps 是指页面每秒帧数
• fps = 60 性能极佳
• fps < 24 会让用户感觉到卡顿，因为人眼的识别主要是24帧

根据谷歌统计的数据，用户在不同时间段内接收到的反馈，可能直接影响到对于网站的用户留存，如下图：

在这里我们不深入讲对于这方面的一些细节，这篇文章主要是给大家讲一下，如果做任务切片，如何优化界面的渲染速度和响应速度.

什么是chrome性能分析模板？

性能你都去哪儿了？俗话说知己知彼百战不殆，我们要了解性能是怎么分配的，才能做好性能优化塞，性能分析模板告诉你答案！

从加载，脚本，渲染，paint（绘制）其他，空闲，通过这种饼状图方式，我们对性能一目了然。

为何要上手该面板？

不用白不用。

开始学习

进入隐身模式 ctrl+shift+N

打开 performance 选项卡

点击图中的齿轮，为了模拟移动端，我们根据电脑性能选择相应的cpu节流。

打开截图功能

此外如果还勾选了memory根据变化还可以看到大致的垃圾回收周期，以及有无明显的内存泄露。

准备完毕，真刀真枪干。

我们先获取优化前的各种数据分析:先点击左上角 record 圆点记录优化前版本的运行时性能,过一段时间之后点击停止。圆点旁边的刷新样的标志（大佬叫圆形箭头，hhh）是用于 loading 的性能分析的按钮。

参观一下性能分析面板

图片的右边标有:FPS;CPU;NET

1. (Analyze frames per second)帧率,FPS

红色横条表示帧率过低已经影响了用户体验，通常情况下绿条越高,帧率越高,体验越好.当帧率不影响使用的时候横条是不会出现的。

cpu对应下方summary的饼图，哪块大，哪块对应的cpu消耗也就越大。

从本图中不难看出花在页面渲染的cpu消耗是最多的。

在FPS,CPU,NET上 左右移动鼠标,就可以看到各个时间点的截图,这在分析动画执行的各个阶段,以及了loading的各个阶段的时候尤其有用.

图片左边的部分：

1. 如果记录期间包含网络请求那么在 frame 上面还有一栏 Network,会用不同的颜色表示请求不同的资源
2. frames区域，鼠标点上去会显示当前的帧率

1. 在记录过程中按快捷键cmd + shift + p 然后输入 show rendering (打开实时查看帧率的面板),可以看到实时的帧率变化
2. main 代表主线程, 一段横条代表执行一个事件(函数),长度越长,花费的时间越多; 竖向代表调用栈.如果在这些横条中右上角是红色的就表示在该段代码执行过程中可能存在性能问题.

3. 我们可以看到上图中很多黄色横条的右上角是红色的，点击展开 main中的 这一部分: 点击 animation frame fired 事件,可以在下面看到相关信息. 并且可以定位到 source 面板中的相关代码.根据定位到的代码段,阅读代码我们可以发现,问题是出在选中的蓝色背景的这句代码中

具体出了什么问题，不做讨论。[重绘与重排][Link 2]也可以看看谷歌官方文档

最后补充一下和summory tab同级的几个tab

1. Bottom-Up,展示浏览器执行的各个操作说占用的时间

• 在 Timeline 中选取一段时间,然后点击 Bottom-Up得到上图,图片中展示浏览器执行的各个操作说占用的时间

2. Call Tree,表示浏览器的基本操作(事件执行,绘制...)所占用的时间

• 同理点击Call Tree 得到上图: 表示浏览器的基本操作(事件执行,绘制...)所占用的时间

3. Event Log,可以按照选中时间内事件发生的顺序来查看事件执行所占用的时间.

同理点击 Event Log得到上图: 可以按照选中时间内事件发生的顺序来查看事件执行所占用的时间.