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中的History历史对象
Jan 16 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
瀑布流布局代码一例
Apr 11 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 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
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
一个js实现的所谓的滑动门
2007/05/23 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
详解python调用cmd命令三种方法
2019/07/08 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python单例设计模式实现解析
2020/01/07 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
自荐信写法介绍
2014/01/25 职场文书
电台实习生求职信
2014/02/25 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
MySQL日期时间函数知识汇总
2022/03/17 MySQL
浅谈Vue的computed计算属性
2022/03/21 Vue.js