6、Chrome之Performance面板

一、界面

二、火焰图解释 

a.传统火焰图

y 轴表示调用栈，每一层都是一个函数。调用栈越深，火焰就越高，顶部就是正在执行的函数，下方都是它的父函数。

x 轴表示抽样数，如果一个函数在 x 轴占据的宽度越宽，就表示它被抽到的次数多，即执行的时间长。注意，x 轴不代表时间，而是所有的调用栈合并后，按字母顺序排列的。

b.performance的火焰图

performance的火焰图是倒置的，且X轴表示的是时间

三、识图

A区域：

1、Record：记录按钮，点击后变为红色，可以在页面上进行各种操作，操作都会被浏览器进行记录。

2、Start profiling and reload page：开始收集信息并且重新载入页面，可以理解为刷新。

3、Clear：清除记录

4、load profile/save profile：载入/报错记录

5、Screenshots：勾选后，会增加截屏展示

6、Memory：勾选后，会增加内存信息展示

7、Disable JavaScript samples：勾选后，在main中会忽略js调用栈

8、Enable advanced paint instrumentation：勾选后，启用高级绘图工具，可以在分析结果的Frames中的每一帧的详细结果中看到Layer选项卡，其中有选中帧的详细图层信息；也可以在Main主线程火焰图中选中绿色的Paint事件，在最底部详细信息的Paint Profile选项卡中，看到详细的页面绘制过程分析

 9、Network：模拟网络速度

10、CPU ：模拟cpu，No throttling（无节流，不限制），4x showdown（四倍慢速，No throttling的四分之一），6x showdown（6倍慢速，No throttling的六分之一）

B区域

B区域为overview概览区域

FPS：绿色竖线越高，FPS 越高。 FPS 图表上的红色块(上图刚开始的部分)表示长时间帧，很可能会出现卡顿。

CPU：此图展示消耗 CPU 资源的事件类型。颜色与 Summary 面板里的颜色是相互对应的

NET：展示资源占用网络情况，横杠越长，网络花费时间越长

 

C区域 

Network：展示资源加载顺序及耗费时间

Frames：分层展示页面加载情况，点击可以展示某个分层的fps值

Timings：展示主要的几个时间点，点击后Summary中展示具体的值。

Main：展示详细函数调用栈及执行顺序，超过50ms的长任务会被特殊标记

Raster：光栅线程

GPU：GPU进程

Chrome_ChildIOThread：浏览器IO子线程，用来接收其他进程的IPC消息和派发资深消息到其他进程。

Compositor：排版线程

GpuMemoryThread：Gpu内存线程

ThreadPoolForegoroundWorker：工作线程

D区域

 

Summary：用颜色标记各种资源的耗时，点击某个资源时，也会展示其详细信息

Bottom-Up：展示详细的耗时信息及占比，且可以直接点击后面的js名称进行跳转

Call Tree：调用栈，展示调用顺序

Event Log ：展示详细的事件日志

四、重绘与重排 

重排（reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘（repaint）：当位置、颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

注：重排必定会引发重绘，但重绘不一定会引发重排

 

浏览器进程相关参考

https://blog.csdn.net/wangfeijiu/article/details/106563082