[萌]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,能够按照选中时间内事件发生的顺序来查看事件执行所占用的时间.