JavaScript中的console.profile()函数详细介绍

编写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()语句所得到的结果时一致的。

赞 (0)

相关推荐

  • 利用Js的console对象,在控制台打印调式信息测试Js的实现

    一次偶然的机会,打开百度的时候按下了F12,然后就见控制台里面输出了百度的招聘广告,感觉挺帅气的,再然后就有了这篇博文. 既然可以这样在控制台输出信息,那以后再调试Js的时候不就可以省去很多麻烦了嘛!避免不误人子弟,特意使用for(var i in console)查看了下各种浏览器控制台对console的支持, 结果如下: IE 11 控制台 log , info , warn , error , debug , assert , time , timeEnd , group , groupC

  • Javascript调试之console对象——你不知道的一些小技巧

    Javascript调试之console对象——你不知道的一些小技巧

    前言 写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量. 但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法.由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示. 不同级别日志 通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示. 不同级别的日志

  • JavaScript中的console.dir()函数介绍

    JavaScript中的console.dir()函数介绍

    在调试JavaScript程序时,有时需要dump某些对象的详细信息.通过手工编写JavaScript代码可以完成这一工作:针对对象的属性进行循环,将循环到的每一个属性值打印出来:可见,这一过程是比较繁琐的.在具备调试工具的浏览器上,这一工作可以通过console.dir()语句来方便的完成. console.dir()的使用 console.dir()的使用非常简单,直接将需要dump的对象传入该语句即可.比如以下的例子: 复制代码 代码如下: function cat(name, age,

  • node.js中的console用法总结

    node.js中的console用法总结

    复制代码 代码如下: //建立app.js页面 // 一:页面代码 console.log("log信息"); //在页面中执行(node app.js)这个文件会在控制台中看到log信息:"log信息" //换个方式执行:node app.js 1>info.txt(1代表重定向标准输出流); //这个时候会在app.js的同级目录下看到一个info.txt文件,里面还有"log信息". //二:依次序输出所有字符串 console.lo

  • JavaScript中的console.group()函数详细介绍

    JavaScript中的console.group()函数详细介绍

    在使用console.log()或者其它日志级别的控制台输出功能时,日志输出是没有层级关系的.当程序中日志输出较多时,这一局限性将带来不小的麻烦.为了解决这一问题,可以使用console.group().以下面代码为例: 复制代码 代码如下: function doTask(){     doSubTaskA(1000);     doSubTaskA(100000);     console.log("Task Stage 1 is completed");     doSubTas

  • JavaScript中的console.time()函数详细介绍

    如果需要在Web调试过程中知道代码执行的时间,那么可以通过在JavaScript代码中添加console.time()语句和console.timeEnd()语句来对程序的执行进行计时.以下面这个耗时较长的foo()函数为例: 复制代码 代码如下: function foo(){     var x = 4.237;     var y = 0;     for (var i=0; i<100000000; i++) {         y = y + x*x;     }     return

  • JavaScript中的console.trace()函数介绍

    JavaScript中的console.trace()函数介绍

    调试JavaScript程序时,有时需要打印函数调用的栈信息,这可以通过使用console.trace()来实现.以下面的代码为例: 复制代码 代码如下: function doTask(){     doSubTask(1000,10000); }   function doSubTask(countX,countY){     for(var i=0;i<countX;i++){         for(var j=0;j<countY;j++){}     }     console.t

  • JS中捕获console.log()输出的方法

    本文实例讲述了JS中捕获console.log()输出的方法.分享给大家供大家参考.具体分析如下: 我们知道console.log()可以将信息输出到debugger中供开发者查看.但如果我们想要在JS中获取console.log()的输出结果呢?其实不难,先将原本的console.log保存起来,然后替换成另外一个实现即可.代码如下: var lastLog; console.oldLog = console.log; console.log = function(str) { console

  • JavaScript中的console.assert()函数介绍

    JavaScript中的console.assert()函数介绍

    在JavaScript程序的开发和维护过程中,Assert(断言)是一个很好的用于保证程序正确性的特性.在具备调试工具的浏览器上,这一特性可以通过调用console.assert()来实现.比如在以下代码中,console.assert()语句保证cat对象的score变量值长度为3: 复制代码 代码如下: function cat(name, age, score){     this.name = name;     this.age = age;     this.score = scor

  • JavaScript中的console.profile()函数详细介绍

    JavaScript中的console.profile()函数详细介绍

    编写JavaScript程序时,如果需要知道某段代码的执行时间,可以使用console.time().不过,在分析逻辑较为复杂的JavaScript程序,试图从中找出性能瓶颈的时候,console.time()就不适用了 - 深入分析逻辑较为复杂的JavaScript程序的运行就意味着插入大量的console.time()语句,而这无疑是不可接受的.对于复杂逻辑的JavaScript程序调优,正确的方法是使用console.profile(). 浏览器支持 安装了Firebug插件的Firefo

  • JavaScript中的console.log()函数详细介绍

    JavaScript中的console.log()函数详细介绍

    对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用:而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑. 什么是console.log()? 除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来

  • JavaScript中的立即执行函数表达式介绍

    我们习惯看到这样的匿名函数 复制代码 代码如下: (function(){     console.log("test"); })(); 之前一直叫的是自执行的匿名函数(self-executing anonymous function) 发现原来还有一种叫法是: 立即调用函数表达式 (IIFE,Immediately-Invoked Function Expression) 立即调用函数表达式 相比于自执行匿名函数,立即调用函数表达式的意思来得更明确一些. 自执行函数有下面的这一些例

  • JavaScript中的分号插入机制详细介绍

    仅在}之前.一个或多个换行之后和程序输入的结尾被插入 也就是说你只能在一行.一个代码块和一段程序结束的地方省略分号. 也就是说你可以写如下代码 复制代码 代码如下: function square(x) {     var n = +x     return n * n } 但是却不可以写的像下面代码一样,这样就报错了哦 复制代码 代码如下: function area(r) {    r = +r    return Math.PI*r*r }//error 仅在随后的输入标记不能解析时插入

  • JavaScript的function函数详细介绍

    JavaScript的function函数详细介绍

    通过函数来封装任意多条语句,而且可以在任何地方.任何时间调用执行. 而我们的JavaScript脚本语言比较特殊,相对于C语言,它的参数是不需要数据类型加持的.返回值return,我就不过多描述,他是和 C语言通的,如果没写他就会自动返回undefined function fun(x,y){ } //写成这样就可以声明一个函数 以我的理解他就是以对象的形式来传入参数,通过对象的各项属性值(引用类型的值),来作为我的实际参数, 例如我有以下做法: function fun(x, y) { //

随机推荐