performance.now() 与 Date.now() 对比

performance.now() 与 Date.now() 对比

发布于 2022-10-28 16:35:22

4.2K0

举报

文章被收录于专栏：前端小叙

关联问题

换一批

 

 performance.now()与Date.now()在测量时间精度上有何差异？

 performance.now()和Date.now()返回的时间单位是什么？

 在浏览器环境中，performance.now()和Date.now()谁提供的时间更准确？

概念

performance.now()：返回值表示为从time origin之后到当前调用时经过的时间，

time origin: 时间源，

时间源是一个可以被认定为当前文档生命周期的开始节点的标准时间，计算方法如下：

• 如果脚本的 global object 是 Window, 则时间源的确定方式如下：
  • 如果当前 Document 是中加载的第一个 Window, 则时间源是创建浏览器上下文的时间。
  • 如果处于卸载窗口中已加载的先前文档的过程中，​​ 一个确认对话框会显示出来，让用户确认是否离开前一页，则时间源是用户确认导航到新页面的这个时间，这一点是被认同的。
  • 如果以上方式都不能确定时间源, 那么时间源是创建窗口中当前 Document 的导航发生的时机。
• 如果脚本中的全局对象是 WorkerGlobalScope (意味着，该脚本以 web worker 的形式运行), 则时间源是这个 worker 被创建的时刻。
• 在所有其他情况下，时间源的值是 undefined。

Date.now()：Date.now() 方法返回自 1970 年 1 月 1 日 00:00:00 (UTC) 到当前时间的毫秒数。

对比

• performance.now() 和 JavaScript 中其他可用的时间类函数（比如Date.now）不同的是，window.performance.now()返回的时间戳没有被限制在一毫秒的精确度内，相反，它们以浮点数的形式表示时间，精度最高可达微秒级。
• 另外一个不同点是，window.performance.now()是以一个恒定的速率慢慢增加的，它不会受到系统时间的影响（系统时钟可能会被手动调整或被 NTP 等软件篡改）。另外，performance.timing.navigationStart + performance.now() 约等于 Date.now()。
• performance.now是浏览器(Web API)提供的方法，不同浏览器获取到的精度不同。Date.now是Javascript内置方法，差异主要在于浏览器遵循的ECMAScript规范
• Date.now() ≈ performance.timing.navigationStart + performance.now() 

适用场景

耗时计算

performance.now() 方法

代码语言：javascript

 

AI代码解释

 

performance.now()-performance.now() 
// 分别为两个时刻的 performance.now()

优点：

• 精确度高，低于 1ms（实际情况视浏览器的不同，精度大约在 0.1ms ~ 0.005ms　之间）；
• 记录的时间可以被变量所保存，因此可以用于生产环境使用；

缺点：

• 返回的值，跟打开网页的时间有关（至少chrome如此），并不像 Date.now() 那样直接返回现在距离 1970 年那个起始时间的毫秒数。

console.time方法

代码语言：javascript

 

AI代码解释

 

console.time("耗时")
for(let i=0;i<1000;i++){console.log(i)
}
console.timeEnd("耗时")// 耗时: 38.914794921875 ms

优点：

• 精度比较高（单位小于毫秒），连续两行 console.time('耗时') 和 ··console.timeEnd('耗时')··，他也能计算出时间差异；

缺点：

• 首先只能在控制台显示结果，他本身是没有返回值的；
• 不能提交到服务器日志；

Date.now() 方法

前后两个时间相减即可。

优点：

• 可以获取当前的时间，并且被变量保存；

缺点：

• 精度太低，小于 1ms 的测试不出来结果；

参考文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/now

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/now

https://developer.mozilla.org/zh-CN/docs/Web/API/DOMHighResTimeStamp#the_time_origin

https://zhuanlan.zhihu.com/p/570601679

https://blog.csdn.net/weixin_34240657/article/details/91422212

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-10-12，如有侵权请联系 cloudcommunity@tencent.com 删除