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 相关文章推荐
jQuery滚动加载图片效果的实现
Mar 06 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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
简化php模板页面中分页代码的解析
2009/02/06 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
学习Node.js模块机制
2016/10/17 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
python eventlet绿化和patch原理
2020/11/21 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
Why we need EJB
2016/10/20 面试题
2014年预备党员学习两会心得体会
2014/03/17 职场文书
社区党建工作方案
2014/06/10 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
使用Python获取字典键对应值的方法
2022/04/26 Python