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 Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
bootstrap datepicker的基本使用教程
Jul 09 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
javascript实现下雨效果
2017/03/27 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
linux下python抓屏实现方法
2015/05/22 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
python selenium 获取接口数据的实现
2020/12/07 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
客户表扬信范文
2014/01/10 职场文书
平面设计专业求职信
2014/08/09 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android