JavaScript console.profile() 函数详解与性能分析实战

JavaScript性能分析与console.profile()简介

在开发JavaScript程序时，若需测量特定代码段的执行耗时，通常使用console.time()。然而，当面对逻辑复杂的JavaScript应用并试图定位性能瓶颈时，console.time()往往力不从心。深入分析复杂逻辑意味着需要在代码中插入大量console.time()语句，这种做法既繁琐又不可接受。对于复杂JavaScript程序的调优，正确且高效的方法是使用console.profile()。

浏览器支持情况

浏览器支持与使用注意事项

目前，安装Firebug插件的Firefox、Google Chrome以及Safari浏览器均支持console.profile()语句。最新版本的IE和Opera也提供了相应的Profile功能。尽管各大浏览器上的console.profile()用法基本一致，本文主要基于Firebug控制台的使用情况进行介绍。需要特别注意：如果在Firebug控制台中直接编写JavaScript实验代码，console.profile()将无效。

console.profile()的基本用法

console.profile()代码示例与结果解析

使用console.profile()非常简单：只需在需要开始性能分析的位置插入console.profile()，并在结束分析的位置插入console.profileEnd()即可。以下代码示例展示了具体用法：

function doTask(){
doSubTaskA(1000);
doSubTaskA(100000);
doSubTaskB(10000);
doSubTaskC(1000,10000);
}
function doSubTaskA(count){
for(var i=0;i<count;i++){}
}
 
function doSubTaskB(count){
for(var i=0;i<count;i++){}
}
 
function doSubTaskC(countX,countY){
for(var i=0;i<countX;i++){
for(var j=0;j<countY;j++){}
    }
}
console.profile();
doTask();
console.profileEnd();

在调用doTask()函数之前执行console.profile()，并在其运行结束后执行console.profileEnd()，即可收集doTask()函数运行过程中的详细性能数据。在Firebug控制台中可以看到相应的分析结果：

从结果中可以看出，此次Profile总耗时为101.901ms，涉及5次函数调用。结果的默认标题为“Profile”，但可以通过向console.profile()传入参数来自定义标题。例如，使用console.profile(“Test Profile”)可将结果标题更改为“Test Profile”，这在同时执行多个Profile过程时尤为有用。具体Profile结果中各列的含义如下：

1.Function：函数名。 2.Calls：调用次数。例如，在上述示例中，doSubTaskA()函数被执行了2次。 3.Percent：该函数调用所消耗的时间占总时间的百分比。 4.Own Time：排除调用其他函数所耗时间后，该函数本身执行的耗时。例如，doTask()虽然执行时间长，但其耗时主要花在对其他函数的调用上，因此其Own Time仅为0.097ms。 5.Time：不考虑对其他函数的调用，计算函数的总耗时。例如，doTask()函数总耗时为101.901ms。对比Time和Own Time，如果Time大于Own Time，说明该函数内部调用了其他函数。 6.Avg：函数的平均总耗时，计算公式为Avg=Time/Calls。例如，doSubTaskA()执行2次，总耗时1.054ms，平均耗时为0.527ms。 7.Min：该函数调用的最小耗时。例如，doSubTaskA()的两次调用中，较少的那次耗时为0.016ms。 8.Max：该函数调用的最大耗时。例如，doSubTaskA()的两次调用中，较多的一次耗时为1.038ms。 9.File：函数所在的JS文件路径。

Firebug Profile按钮的实时分析功能

Firebug中Profile按钮的使用

除了在JavaScript代码中手动插入console.profile()语句，Firebug还提供了Profile按钮，以便动态实时地对页面中的JavaScript代码进行性能分析。该按钮的位置如下：

当需要进行性能分析时，可以按下该按钮。此后，任何触发的JavaScript代码都将被Firebug记录。分析结束时，再次按下该按钮即可停止记录。其最终结果与在代码中插入console.profile()语句所得到的结果完全一致。