编写 JavaScript 程序时,如果需要知道某段代码的执行时间,可以使用 console.time()。不过,在分析逻辑较为复杂的 JavaScript 程序,试图从中找出性能瓶颈的时候,console.time() 就不适用了 — 深入分析逻辑较为复杂的 JavaScript 程序的运行就意味着插入大量的 console.time() 语句,而这无疑是不可接受的。对于复杂逻辑的 JavaScript 程序调优,正确的方法是使用 console.profile()。
浏览器支持
安装了 Firebug 插件的 Firefox、Google Chrome 以及 Safari 都支持 console.profile() 语句,最新版的 IE 和 Opera 也提供了 Profile 功能。在几大浏览器上 console.profile() 的使用大同小异,本文仅介绍 Firebug 中 console.profile() 的使用情况。值得注意的一点是:如果使用 Firebug 控制台来直接编写 JavaScript 实验代码,那么 console.profile() 是无效的。
console.profile() 的使用
console.profile() 的使用非常简单:在需要开始 profile 的地方插入 console.profile(),在结束 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(),doTask() 函数运行完成后执行 console.profileEnd(),这样即可收集到 doTask() 函数运行过程中的细节信息。在 Firebug 的控制台中可以看到:
从结果中可以看到:此次 profile 时间共计 101.901ms,涉及 5 次函数调用。结果的默认标题是 "Profile",可以通过向 console.profile() 函数传入参数来进行自定义。比如,使用 console.profile("Test Profile") 即可在结果中将此次 profile 的标题改为"Test Profile",这对于同时执行多个 profile 过程的情况下尤为有用。具体 profile 结果中各列的含义为:
1.Function。函数名。 2.Calls。调用次数。比如,在上面的例子中,doSubTaskA() 函数被执行了 2 次。 3.Percent。该函数调用所消耗的时间在总体时间中所占的百分比。 4.Own Time。除去调用其它函数所消耗的时间,该函数本身的耗时数量。比如,在上面的例子中,doTask() 无疑执行了很长时间,但是因为其耗时全部花在了对其它函数的调用上,因此其本身所耗时间并不多,仅为 0.097ms。 5.Time。与 Own Time 相反,不考虑对其它函数的调用因素,计算函数的总耗时。在上面的例子中,doTask() 函数执行了 101.901ms。对于 Time 和 Own Time,也可以得到一个结论:如果 Time 比 Own Time 数值要大,那么该函数内部就涉及了对其它函数的调用。 6.Avg。计算函数的平均总耗时,其计算公式为:Avg=Time/Calls。在上面的例子中,doSubTaskA() 函数被执行了 2 次,其总耗时为 1.054ms,因此其平均总耗时为 0.527ms。 7.Min。对该函数调用的最小耗时。比如,在上面的例子中,doSubTaskA() 函数被执行了 2 次,其最小耗时,也就是耗时较少的那次调用花掉了 0.016ms。 8.Max。对该函数调用的最大耗时。比如,在上面的例子中,doSubTaskA() 函数被执行了 2 次,其最大耗时,也就是耗时较多的那次调用花掉了 1.038ms。 9.File。函数所在的 JS 文件。
Firebug 中 Profile 按钮的使用
除了在 JavaScript 代码中插入 console.profile() 语句,Firebug 还提供了 Profile 按钮以便动态实时地对页面中的 JavaScript 代码进行 profile。该按钮位置为:
当需要进行 profile 时,可以按下该按钮,如果接下来的页面操作触发了任何 JavaScript 代码,Firebug 将会对此进行记录。profile 过程结束时只要再一次按下该按钮即可。其最终结果与插入 console.profile() 语句所得到的结果时一致的。
来源: http://www.phperz.com/article/17/0422/273648.html