Chrome 火焰图

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Dream_On_324/article/details/82734531

对于 Web 开发者来说,Chrome 是首选开发浏览器之一,因其丰富的调试工具,大大加了快 debug 效率。那么除了常用的断点调试、网络请求等功能,Chrome 还提供了火焰图分析,下面就来介绍一下基于 Chrome 浏览器的火焰图调试和使用方法。

首先打开控制台,切换到 Performance 面板,点击左上角的刷新按钮(当然也可以使用 record 按钮),等页面刷新完毕后会生成一张火焰图。火焰图由 x、y 两个坐标轴组成,y轴表示调用堆栈,你可以简单的理解为函数的层级调用,x轴为执行时间,即某个函数执行过程的时长。

下面我们用一个示例来说明,如何使用火焰图进行调试。

var i = 0, arr = [];

while(i < 4000000) {
    arr.push(i);
    i++
}

function testFor() {
    var result = [];
    for (var i = 0; i < arr.length; i++) {
        result.push(i);
    }
}

function testForEach() {
    var result = [];
    arr.forEach(function(i) {
        result.push(i);
    });
}

// 分别测试两个方法
testForEach();
testFor();

以上代码可以看成是对 for 与 forEach 的性能测试,那么以该示例为基准,我们来看下在火焰图中是怎样分析的。先来看下调用 testFor() 方法生成的火焰图:

fire

注意截图左半部分的蓝色框标记处,上面标明了 “testFor”,说明该堆栈为 testFor() 方法的调用,在下方的 “Summary” 处写明了当前方法的总共消耗时长为 100.86ms ,方法从生成到调用消耗了 34.9ms,而方法内的循环执行了 60.0ms。

我们再来看下调用 testForEach() 方法生成的火焰图:

通过查看下方的 “Summary” 可知,testForEach() 方法总耗时为 163.77ms,方法从生成到调用消耗了 1.0ms,而方法内的循环执行了 168.8ms。

由此可得出结论,在相同环境下,普通的 for 循环比 forEach 效率高。当然,以上实验并不是很准确,只是象征性的测试,感兴趣的同学可以动手尝试一下。

好了,总结下火焰图分析的基本要素:

1. 首先要明白火焰图的 x轴、y轴分别代表什么,x轴为执行时长,y轴为堆栈调用;

2. 然后在 y 轴的顶部部分找到调用时长较长的方法

    a. 这里的顶部指的是山峰的部分,即视觉的下半部分。

    b. 为什么在顶部找,是因为底部的方法为底层方法,我们自己写的代码通常在业务方法里,也就是调用堆栈的偏上部分

3. 结合底部 “Summary” 面板给出的信息,分析当前方法是否造成了性能瓶颈。

以上就是 Chrome 火焰图的基本使用方法,有没有觉得很简单呢~

注意:本文所说的火焰图是基于浏览器的,而非标准火焰图,如果想了解标准的火焰图,可以看阮老师的文章 如何读懂火焰图

展开阅读全文

没有更多推荐了,返回首页