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动态调整iframe高度的方法
Mar 06 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
jquery实现保存已选用户
Jul 21 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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
symfony表单与页面实现技巧
2015/01/26 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python中Continue语句的用法的举例详解
2015/05/14 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python 修改本地网络配置的方法
2019/08/14 Python
django queryset相加和筛选教程
2020/05/18 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
反腐倡廉警示教育活动总结
2014/05/05 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
涨价通知怎么写
2015/04/23 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python