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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页