イベントの高解像度タイムスタンプ

Event インターフェースの timeStamp プロパティは、特定のイベントが発生した時刻を示します。

Chrome 49 より前のバージョンでは、この timeStamp 値は DOMTimeStamp として表現されていました。これは、Date.now() が返す値とほぼ同様に、システム エポックからのミリ秒単位の整数でした。

Chrome 49 以降では、timeStampDOMHighResTimeStamp の値です。この値はミリ秒数ですが、解像度はマイクロ秒です。つまり、値には小数点が含まれます。また、値はエポックを基準とする代わりに、PerformanceTiming.navigationStart(ユーザーがページに移動した時刻)を基準とします。

タイムスタンプの精度を高めるメリットは、次の例で確認できます。

クロスブラウザとレガシーに関する考慮事項

2 つのイベントの Event.timeStamp 値を比較する既存のコードがある場合、DOMHighResTimeStamp への移行に合わせてコードを調整する必要はありません。さらに、DOMHighResTimeStamp をサポートするブラウザでは、ウェブページの実行中にシステム クロックが変化しても、DOMHighResTimeStamp単調増加することが保証されているとともに、マイクロ秒単位の精度が向上するというメリットを既存のコードに活かすことができます。

2 つの Event.timeStamp 値を比較する代わりに、イベントの発生時刻をコードで判断する必要がある場合は、新しい DOMHighResTimeStamp 値を performance.now() と直接比較できます。また、Event.timeStamp をシステム エポックからの絶対ミリ秒数に変換する必要がある場合は、DOMHighResTimeStampperformance.timing.navigationStart に追加することでその値を取得できます。

どちらの場合も、DOMTimeStampDOMHighResTimeStamp の動作は異なりますが、Majid Valipour 提供の変換関数を使用すると、ブラウザのクロスコードを簡素化できます。Event オブジェクトをパラメータとして受け取り、DOMHighResTimeStamp のような値を返します。この値は、performance.now() と比較したり、performance.timing.navigationStart に追加したりできます。