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


Posted in Javascript onDecember 29, 2014

编写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的控制台中可以看到:

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

从结果中可以看到:此次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。该按钮位置为:

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

当需要进行profile时,可以按下该按钮,如果接下来的页面操作触发了任何JavaScript代码,Firebug将会对此进行记录。profile过程结束时只要再一次按下该按钮即可。其最终结果与插入console.profile()语句所得到的结果时一致的。

Javascript 相关文章推荐
javaScript call 函数的用法说明
Apr 09 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
jQuery中element选择器用法实例
Dec 29 #Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 #Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 #Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 #Javascript
浅谈重写window对象的方法
Dec 29 #Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 #Javascript
深入分析原生JavaScript事件
Dec 29 #Javascript
You might like
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
php xhprof使用实例详解
2019/04/15 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
json 实例详细说明教程
2009/10/31 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
自己使用总结Python程序代码片段
2015/06/02 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
如何填写个人简历自我评价
2013/12/10 职场文书
微信营销策划方案
2014/02/24 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
python的变量和简单数字类型详解
2021/09/15 Python
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python