實現高精度時間獲取的Javascript函數

一、javascript中獲取時間的常用方法

在javascript中，我們通常使用新建Date對象的方式獲取當前的時間，並可以通過該對象調用相關的方法得到年、月、日、時、分、秒等信息：

var date = new Date();
var year = date.getFullYear(); //獲取年份
var month = date.getMonth()+1; //獲取月份，需要注意的是月份是從0開始的，因此需要加1
var day = date.getDate(); //獲取日期
var hour = date.getHours(); //獲取小時
var minute = date.getMinutes(); //獲取分鐘
var second = date.getSeconds(); //獲取秒

但是基於系統內核計算機在時間表示上的精度（一般不超過萬分之一秒）， Date對象可能無法滿足所有高要求精度的場景。這時候需要用到高精度時間獲取的方法。接下來我們介紹兩種方法，一種是通過window.performance.now()函數實現，另一種是通過window.Date.now()函數實現。

二、window.performance.now()函數實現高精度時間獲取

window.performance.now() 方法返回當前網頁自 1970/01/01 00:00:00 UTC（協調世界時）到當前時間的毫秒數。這個函數返回的是一個浮點數類型，這個浮點數類型沒有整數部分，只有小數部分。

var start = window.performance.now(); //獲取當前時間
// 這裡是需要進行測量時間的代碼邏輯
var end = window.performance.now(); //獲取結束時間
var costTime = end - start; //得出兩次時間差，單位為毫秒
console.log("代碼邏輯執行耗費時間:"+costTime+"ms"); //輸出結果

三、window.Date.now()函數實現高精度時間獲取

window.Date.now() 返回自1970年1月1日00:00:00 UTC到當前時間的毫秒數。

var startTime = window.Date.now(); //獲取當前時間
// 這裡是需要進行測量時間的代碼邏輯
var endTime = window.Date.now(); //獲取結束時間
var costTime = endTime - startTime; //得出兩次時間差，單位為毫秒
console.log("代碼邏輯執行耗費時間:"+costTime+"ms"); //輸出結果

四、結合getBoundingClientRect()方法實現高精度時間獲取

通過前兩種方式獲取的時間還不能算真正意義上的高精度時間（這裡的精度是指能夠達到微秒級別），接下來我們介紹一種高精度獲取時間的方法。通過window.performance.now()也只能夠獲取到當前chrome進程的相對時間，而無法獲取硬件級別的真實時間戳，我們可以通過getBoundingClientRect()方法結合window.performance.timing.navigationStart來計算出一個硬件級別時間戳來獲得真正意義上的高精度時間：

function getMicrosecondTimestamp() {
  var time = window.performance.now().toFixed(6); //獲取相對時間
  var rect = document.body.getBoundingClientRect(); //獲取body所在位置信息的DOMRect
  var slDifference = rect.left + window.screenLeft; //計算左邊框與屏幕的距離
  var stDifference = rect.top + window.screenTop; //計算上邊框與屏幕的距離
  var navigationStart = window.performance.timing.navigationStart; //獲取navigationStart時間
  var microsecondTimestamp = time + navigationStart - slDifference*10 - stDifference*10; //計算時間戳
  return microsecondTimestamp;
}
console.log(getMicrosecondTimestamp()); //輸出時間戳