Performance: now() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

performance.now() メソッドは高解像度のタイムスタンプをミリ秒で返します。これは Performance.timeOrigin (ウィンドウコンテキストではナビゲーションを開始した時刻、 Worker および ServiceWorker コンテキストではワーカーを実行した時刻)からの経過時間を表します。

構文

js
now()

引数

なし。

返値

ミリ秒単位で計測した DOMHighResTimeStamp を返します。

解説

Performance.nowDate.now

Date.now とは異なり、performance.now() が返すタイムスタンプは 1 ミリ秒の解像度に制限されません。時刻をマイクロ秒精度までの浮動小数点数で表します。

また、 Date.now() は Unix 元期 (1970-01-01T00:00:00Z) からの相対値で、システムクロックに依存しているため、システムクロックやユーザークロックの調整、クロックスキューなどの影響を受ける可能性があります。 一方、 performance.now() メソッドは、 monotonic clock である timeOrigin プロパティからの相対値です。その現在時刻は決して減少せず、調整の対象にはなりません。

performance.now の仕様の変更

高解像度時間レベル 1 とレベル 2 では、 performance.now() メソッドの意味づけが変わりました。

変更 レベル 1 レベル 2
基点 performance.timing.navigationStart Performance.timeOrigin
起動条件 文書の読み込みまたはアンロードのプロンプト(もしあれば)。 閲覧コンテキストの作成(前の文書がない場合)、アンロードプロンプト(ある場合)、またはナビゲーションの開始(HTML 内で定義しているように、取得のいくつか前の段階)。

performance.now() メソッドは、ナビゲーションタイミング仕様書の performance.timing.navigationStart プロパティからの相対値を使用していました。これが変更され、 performance.now()Performance.timeOrigin からの相対値となり、ウェブページ間でタイムスタンプを比較する際の時計の変化のリスクを避けることができるようになりました。

js
// レベル 1 (時計の変更のリスクあり)
currentTime = performance.timing.navigationStart + performance.now();

// レベル 2 (時計の変更のリスクなし)
currentTime = performance.timeOrigin + performance.now();

スリープ中のカウント

詳細度(レベル2)では、スリープ中に performance.now() がカウント動作することが要求されています。Windows の Firefox と Windows の Chromium だけがスリープ中も動き続けているようです。他にも関連するブラウザーバグがあります。

  • Chrome/Chromium (bug)
  • Firefox (bug)
  • Safari/WebKit (bug)

詳細は仕様の issue hr-time#115 でも得られます。

performance.now() の使用

コードの具体的な点からの経過時間を調べるには、次のようにします。

js
const t0 = performance.now();
doSomething();
const t1 = performance.now();
console.log(`Call to doSomething took ${t1 - t0} milliseconds.`);

セキュリティ要件

タイミング攻撃やフィンガープリンティングから保護するために、 performance.now() はサイトの分離状態に基づいて粗くなります。

  • 独立したコンテキストでの解像度: 5 マイクロ秒
  • 独立していないコンテキストでの解像度: 100 マイクロ秒

Cross-Origin-Opener-PolicyCross-Origin-Embedder-Policy ヘッダーを使用して、サイトをオリジン間分離します。

http
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

これらのヘッダーは、最上位の文書がクロスオリジン文書と閲覧コンテキストグループを共有しないことを保証します。 COOP プロセスは、文書を分離し、潜在的な攻撃者がポップアップでそれを開いていたとしても、グローバルオブジェクトにアクセスできないようにし、 XS-Leaks と呼ばれる一連のクロスオリジン攻撃を防止しています。

仕様書

Specification
High Resolution Time
# dom-performance-now

ブラウザーの互換性

BCD tables only load in the browser

関連情報