[萌]chrome性能分析面板

前言

萌新看大佬系列第二集 十分钟上手chrome性能分析模板

学习文章：juejin.im/post/5b6d45… 作者：薄荷前端

什么是chrome性能分析模板？

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

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

为何要上手该面板？

不用白不用。

开始学习

# 准备工作

进入隐身模式 ctrl+shift+N

打开 performance 选项卡

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

打开截图功能

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

# 准备完毕，真刀真枪干。

官方案例

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

参观一下性能分析面板

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

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

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

2. CPU

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

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

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

图片左边的部分：

1. 如果记录期间包含网络请求那么在 frame 上面还有一栏 Network,会用不同的颜色表示请求不同的资源

2. frames区域，鼠标点上去会显示当前的帧率

3. 在记录过程中按快捷键cmd + shift + p 然后输入 show rendering (打开实时查看帧率的面板),可以看到实时的帧率变化

4. main 代表主线程, 一段横条代表执行一个事件(函数),长度越长,花费的时间越多; 竖向代表调用栈.如果在这些横条中右上角是红色的就表示在该段代码执行过程中可能存在性能问题.

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

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

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

1. Bottom-Up,展示浏览器执行的各个操作说占用的时间
2. Call Tree,表示浏览器的基本操作(事件执行,绘制...)所占用的时间
3. Event Log,可以按照选中时间内事件发生的顺序来查看事件执行所占用的时间.