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 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
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
使用 php4 加速 web 传输
2006/10/09 PHP
php类
2006/11/27 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
第四章 php数学运算
2011/12/30 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
Python subprocess模块详细解读
2018/01/29 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
python 读取.nii格式图像实例
2020/07/01 Python
scrapy-splash简单使用详解
2021/02/21 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
纽约海:Sea New York
2018/11/04 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
教师业务学习制度
2014/01/25 职场文书
六查六看自查材料
2014/02/17 职场文书
法律七进实施方案
2014/03/15 职场文书
2015年教务工作总结
2015/05/23 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS