如何观察JS代码的执行时长

在开发当中,我们有时候需要知道JS代码从这个函数执行到下一个函数大概花费多久时长,进而对我们的代码进行优化。通常的做法是在计时开始处new一个时间对象,记录下来:

var timeStart = (new Data).getTime()

然后到了计时结束的地方再new一个时间对象,减去前者得到时长:

var timeEnd = (new Data).getTime()
var timeDiff =  timeEnd - timeStart 

但是现在有更便捷的方法,不需要new时间对象就可以获取经历时长了,直接利用Date.now()的方法获取自1970年1月1日 00:00:00 UTC到当前时间的毫秒数

var timeStart = Date.now()

计时结束点:

var timeEnd = Date.now()
var timeDiff =  timeEnd - timeStart 

另外,这个方法对于浏览器的兼容性还是不错的


PC
手机

如果你觉得毫秒级别的计算不满足你的需求,这里还有JS提供的微妙级别的时间获取。

window.performance.now()

该时间戳的值是从window.performance.timing接口的navigationStart属性中的时间戳值为起始点开始计时的

如果你单纯只是想在控制台观察执行的时长,这里有更简便的方式(console.time / console.timeEnd)

// 计时开始点
console.time('label')    // label代表计时器名字
/*** code ***/
// 计时结束点
console.timeEnd('label')

执行console.timeEnd的时候会在控制台输出

label: 19.502ms
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 13,846评论 6 13
  • 参考基础教程的整理,方便记忆 一、Object对象 (O大写) 所有其他对象都继承自这个对象。Object本身也是...
    Viaphlyn阅读 6,882评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,312评论 19 139
  • js简介 Js是一种基于事件和对象驱动的解释性、松散性的语言。 一切皆对象 javascript 布兰登艾奇 ...
    塔库纳玛哈哈阅读 4,952评论 0 2
  • 下图的文字还有什么难以理解的呢!
    不止如此阅读 2,773评论 0 0