本文介绍了火焰图的构成与解读方法，包括传统火焰图与performance火焰图的区别，并详细讲解了浏览器性能工具的各项功能，如记录、重载页面、清除记录等。此外，还深入探讨了重绘与重排的概念及其对网页性能的影响。
一、界面
二、火焰图解释
a.传统火焰图
y 轴表示调用栈，每一层都是一个函数。调用栈越深，火焰就越高，顶部就是正在执行的函数，下方都是它的父函数。
x 轴表示抽样数，如果一个函数在 x 轴占据的宽度越宽，就表示它被抽到的次数多，即执行的时间长。注意，x 轴不代表时间，而是所有的调用栈合并后，按字母顺序排列的。
b.performance的火焰图
performance的火焰图是倒置的，且X轴表示的是时间
三、识图
A区域：
1、
Record：记录按钮，点击后变为红色，可以在页面上进行各种操作，操作都会被浏览器进行记录。
2、
Start profiling and reload page：开始收集信息并且重新载入页面，可以理解为刷新。
3、
最低0.47元/天 解锁文章
扫一扫
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
