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

 更新时间:2014年12月29日 10:18:45   投稿:junjie  
这篇文章主要介绍了JavaScript中的console.time()函数详细介绍,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 y;
}


如果需要知道函数执行过程中消耗了多长时间,可以在foo()函数调用之前插入console.time()语句,在其调用结束后插入console.timeEnd()语句:


复制代码 代码如下:

console.time("test");
foo();
console.timeEnd("test");


程序执行完毕后,控制台会显示此次计时的结果:”test: 1797ms”,显示的日志级别为info。

console.time()和console.timeEnd()接受一个字符串作为参数,该字符串相当于计时的id。浏览器会将拥有相同参数(id)的console.time()与console.timeEnd()进行配对,记录两者之间的时间差。因此,可以通过使用不同的id来对JavaScript程序中不同的地方进行计时。

浏览器支持

对于各个浏览器,console.time()计时的支持情况如下:

Firefox。10.0后原生支持。对于之前版本的Firefox,可以通过安装Firebug插件来实现。详见:https://developer.mozilla.org/en-US/docs/Web/API/console.time?redirectlocale=en-US&redirectslug=DOM%2Fconsole.time
Google Chrome。2.0后原生支持。详见:https://developers.google.com/chrome-developer-tools/docs/console-api#consoletimelabel
IE。IE11中原生支持。对于之前版本的IE,可以通过安装Firebug Lite来实现。详见:http://msdn.microsoft.com/en-us/library/ie/dn265071%28v=vs.85%29.aspx
Safari。4.0后原生支持。详见:https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html
Opera。支持。详见:http://www.opera.com/dragonfly/documentation/console/

相关文章

  • JavaScript中const、var和let区别浅析

    JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var、let、const。但是有朋友不清楚这三种声明变量的区别,下面脚本之家小编给大家详细介绍下js中const、var和let的区别,感兴趣的朋友一起看看吧
    2016-10-10
  • 微信小程序实现自动播放视频模仿gif动图效果实例

    微信小程序实现自动播放视频模仿gif动图效果实例

    这篇文章主要给大家介绍了关于微信小程序实现自动播放视频模仿gif动图效果的相关资料,通过本文介绍的方法可以实现自动播放视频,视频无控制条无声音且自动循环播放,需要的朋友可以参考下
    2021-07-07
  • Javascript基础教程之比较null和undefined值

    Javascript基础教程之比较null和undefined值

    这篇文章主要介绍了Javascript基础教程之比较null和undefined值的相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-05-05
  • js判断样式className同时增加class或删除class

    js判断样式className同时增加class或删除class

    用正则表达式判断多个class之间是否存在真正的class(前后空格的处理)然后增加class删除class,本文给予实现方法,感兴趣的朋友可以了解下,或许对你有所帮助
    2013-01-01
  • JavaScript实现点击按钮后变灰避免多次重复提交

    JavaScript实现点击按钮后变灰避免多次重复提交

    注册的时候需要发送验证激活帐号的邮件,为了避免邮件的多次重复发送,所以可以在点击了发送后,设置按钮变灰,倒计时一段时间后又可重复点击,具体实现如下,感兴趣的朋友可以参考下哈
    2013-07-07
  • JS模拟键盘打字效果的方法

    JS模拟键盘打字效果的方法

    这篇文章主要介绍了JS模拟键盘打字效果的方法,涉及javascript鼠标事件及字符串操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 微信小程序实现用table显示数据库反馈的多条数据功能示例

    微信小程序实现用table显示数据库反馈的多条数据功能示例

    这篇文章主要介绍了微信小程序实现用table显示数据库反馈的多条数据功能,涉及微信小程序wx.request访问php后台及返回结果的显示布局相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • JS实现一键复制

    JS实现一键复制

    这篇文章主要为大家详细介绍了js实现点击按钮复制文本,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Bootstrap模态框调用功能实现方法

    Bootstrap模态框调用功能实现方法

    这篇文章主要介绍了Bootstrap模态框调用功能实现方法的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • 浅谈JavaScript中数组的增删改查

    浅谈JavaScript中数组的增删改查

    下面小编就为大家带来一篇浅谈JavaScript中数组的增删改查。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论