performance.now() 與 Date.now() 對比

概念

performance.now()：返回值表示為從time origin之後到當前調用時經過的時間，

time origin: 時間源，

時間源是一個可以被認定為當前文檔生命周期的開始節點的標準時間，計算方法如下：

• 如果腳本的 global object 是 Window, 則時間源的確定方式如下：
  • 如果當前 Document 是中載入的第一個 Window, 則時間源是創建瀏覽器上下文的時間。
  • 如果處於卸載視窗中已載入的先前文檔的過程中，​​ 一個確認對話框會顯示出來，讓用戶確認是否離開前一頁，則時間源是用戶確認導航到新頁面的這個時間，這一點是被認同的。
  • 如果以上方式都不能確定時間源, 那麼時間源是創建視窗中當前 Document 的導航發生的時機。
• 如果腳本中的全局對象是 WorkerGlobalScope (意味著，該腳本以 web worker 的形式運行), 則時間源是這個 worker 被創建的時刻。
• 在所有其他情況下，時間源的值是 undefined。

對比

• 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() 方法

performance.now()-performance.now() 
// 分別為兩個時刻的 performance.now()

優點：

• 精確度高，低於 1ms（實際情況視瀏覽器的不同，精度大約在 0.1ms ~ 0.005ms　之間）；
• 記錄的時間可以被變數所保存，因此可以用於生產環境使用；

缺點：

• 返回的值，跟打開網頁的時間有關（至少chrome如此），並不像 Date.now() 那樣直接返回現在距離 1970 年那個起始時間的毫秒數。

console.time方法

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