如何观察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

你可能感兴趣的:(如何观察JS代码的执行时长)