使用强大的Chrome开发者工具——性能测试分析篇

继续写这个系列。

撰本文时Chrome版本43.0.2357.81 (64-bit)
性能测试,这个用的不多,简单写写自己了解的。这篇涉及到两个面板Profiles和Audits。

Profiles面板

如图所示:

这个面板可以分析页面中的:

1.函数运行时CPU占有率(collect javaScript CPU Profile)

点击左上角的黑点,随即变成红点,开始记录,或点击下面的Start按钮,随即变成Stop。然后你就可以在页面上做一些业务流程上的交互操作,接着在你希望停止记录的时候,点击红点或Stop按钮,Chrome将生成这个时间段内的各个js函数执行时间,请看

我们可以对Total栏进行高到低的排序,优先关注处理耗时多的函数。它还提供了统计图,点击表格上方的下拉按钮选择Chart选项:

可以看到统计非常详细

2.JS和DOM内存消耗分析(Take Heap Snapshot)

选择Take Heap Snapshot,再点击下面的Take Snapshot按钮,大概一两秒,chrome就为我们生成此时页面中js的各个堆内存情况快照。

3.自定义时间段JS内存分析(Record Heap Allocations)

这个跟第二个功能类似,只不过是提供了起止时间,可以查看一段时间内的内存分配

 

在一般的web开发中,这个面板的功能可能用得很少,因为不涉及大量的脚本程序运算,但在HTML5游戏开发、webGL以及Web APP等需要大量脚本运算的页面,这个功能就变得非常重要,通过这个功能,可以分析出页面帧率为啥提不上去,分析出哪个方法消耗性能太多。

Audits面板

即评审页面的功能,相当于Firebug的YSlow,但据说它比YSlow强大。

如图所示:

这个面板可以分析页面中的静态资源加载是否达到最优,及其缓存情况,还有CSS的使用情况。点击下方的Run按钮,即可生成评审结果,用一张图说明问题: