Profiling JavaScript Performance

1  认识JS（javascript） profile工具

下面以chrome的dev tool为例进行说明如何借助其提供的profile功能进行javascript性能分析，主要步骤：

1.1  JS profile文件采集

主要参考:https://developers.google.com/chrome-developer-tools/docs/cpu-profiling

profile一共提供了三种类型的性能测试

选择“Collect Javascript CPU Profile”选项，点击start按钮则可以进入 JS Profile数据文件的采集，然后在浏览器打开要分析的网页，在网页加载完毕后，点击stop按钮则停止数据的采集。

此外，通过 工具条上的按钮也可以进行profile文件的采集。

1.2  JS profile文件分析

点击刚生成的profile文件，则可以看到各JS函数调用占用cpu的百分比。

self这一列表示每个函数自身(不包括其调用者)调用占用cpu的百分比。Profile视图默认是以self列表数值降序排列的。

total这一列表示每个函数自身及调用者的调用总和占用cpu的百分比。

function这一列表示调用的函数名及函数名所在的脚本和行号，点击三角符号可以看到其调用堆栈，点击文件名和行号所在的蓝色链接可以调整至对应的JS代码。

底部按钮对应功能的说明：

Profile数据展现形式的选择，点击  可以看到一共有三种视图形式可供选择。

Heavy(Bottom Up) 视图是以函数性能的影响来展现，影响越大的函数越靠上。

flame chart以火焰图标的形式来展现。

tree(top down)以树形视图来展现，暂不了解其含义，官网也未做说明。

一般都是以Heavy视图来做分析。

 表示：self和total的数据展现用具体的时间来表示，再次点击又切换回以百分比表示。在self和total每条具体数据项里 双击 可以进行切换。

表示：选中某个函数后，点击此按钮则只看被选中函数的信息。

：选中某个函数后，点击此按钮则此函数被从profile和函数调用堆栈中删除。

：表示恢复所有函数状态。

js profile中programe的意义

https://bugs.webkit.org/show_bug.cgi?id=88446

https://groups.google.com/forum/#!topic/google-chrome-developer-tools/zvc_Wqmie_k

注意这里的program并不是指的一个具体的JS函数名，而是指非JS运行时间

在旧webkit版本里， program代表idle time 、native code处理时间的总和。UC 9.3 开发者版使用的还是旧版的处理

在webkit变更(http://trac.webkit.org/changeset/138118)之后 program仅仅代表native code 的执行时间

idle time是表示空闲时间，比如，你录制的时候 什么都没做，idle那里也会记录时间。

查找JS函数名的位置，当前文件用ctrl+F ，查找所有文件 ctrl +shift +F

2  使用示例

下面以一个具体的例子来做说明，

主要参考：http://blog.jobbole.com/31178/

关注工具的使用即可，至于具体JS函数优化的原理简单了解即可。

测试页面为：

http://zgrossbart.github.io/jsprofarticle/index2.htm

这是一个通过jQuery实现的“颜色排序器”，录制JS profile文件，然后打开profile后如下所示：

可以发现Self列表最顶端的是decimalToHex，其占用了CPU4.23%的时间，也是我们做优化的好地方。

我们可以点击函数调用旁边的“三角”箭头来查看完整的函数调用堆栈。展开后，可以看到decimalToHex

functiondecimalToHex(d) {

    varhex = Number(d).toString(16);

    hex ="00".substr(0, 2 - hex.length) + hex;

 

    console.log('converting '+ d +' to '+ hex);

    returnhex;

}

 

“颜色排序器”中的每一个颜色点都有一个16进制的色彩值，例如#86F01B和#2345FE.这些值表示一种颜色中红，绿，蓝三原色各自的数值。例如的背景色是#2456FE,代表红色的值是36，绿色的值是86，蓝色的是254，每一个数值必须是0到255之间的。

decimalToHex函数把这用RGB值表示的颜色转化为页面中我们使用的16进制颜色。这个函数十分的简单，但是我们还是留下了一个可以去掉的调试代码console.log在那里。

decimalToHex 函数还在数字之前加上了补位。这是很重要的一点，因为有些10进制数字对应的是1个16进制数字。比如十进制中的10对应着16进制中的C，但是在CSS中需要一个两位数。为了让这个进制换算更快速，我们让这段代码不是那么泛化。我们知道每个需要补位的数字长度都为1，所以我们可以这样重写这个函数。

functiondecimalToHex(d) {

    varhex = Number(d).toString(16);

    returnhex.length === 1 ?'0'+ hex : hex; }

 

第三个版本(http://zgrossbart.github.io/jsprofarticle/index3.htm)的“颜色排序器”只有在需要补位的时候才改变字符串，并且不用调用substr函数。有了这个新函数，运行时间是137毫秒。再次对代码进行性能测试，可以发现decimalToHex函数只占用了总时间的%0.04,到了列表的下部。