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


Posted in Javascript onDecember 29, 2014

如果需要在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 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
JS实现瀑布流效果
Mar 07 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 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
JavaScript中的alert()函数使用技巧详解
Dec 29 #Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 #Javascript
You might like
日本十大惊悚动漫
2020/03/04 日漫
截获网站title标签之家内容的例子
2006/10/09 PHP
一个用php实现的获取URL信息的类
2007/01/02 PHP
php时间函数用法分析
2016/05/28 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP7新功能总结
2019/04/14 PHP
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现斐波那契递归函数的方法
2014/09/08 Python
python提取内容关键词的方法
2015/03/16 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
python遍历小写英文字母的方法
2019/01/02 Python
python中如何使用insert函数
2020/01/09 Python
scrapy-splash简单使用详解
2021/02/21 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
军校本科大学生自我评价
2014/01/14 职场文书
工地安全生产标语
2014/06/06 职场文书
会议室管理制度范本
2015/08/06 职场文书
学习十八大的感悟
2015/08/11 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书