パフォーマンス API の使用

ウェブパフォーマンスの基本的な要件は、時刻 の正確で一貫した定義です。 DOMHighResTimeStamp 型 (double) は、すべてのパフォーマンスインターフェイスで、この時刻の値を保持するために使用されています。さらに、特定の時刻のタイムスタンプを作成する方法が必要です。これは now() メソッドで行われます。

ウェブパフォーマンスインターフェイスは、一連の標準規格で定義されています。この標準のベースとなるフェイスは Performance インターフェイスで、そのメソッドやプロパティは異なる形で拡張されています。このガイドでは、 High-Resolution Time 規格で定義されている Performance インターフェイスの使用方法について記述します。他にもウェブパフォーマンスガイド（関連情報の節に掲載されています）では、 Performance インターフェイスの追加のメソッドとプロパティの使用方法について記述しています。

高精度のタイミング

高精度のタイミング は、時刻の値に DOMHighResTimeStamp 型を使用することによって取得できます。単位はミリ秒であり、 5μs（マイクロ秒）の精度が必要です。しかし、ブラウザーが（例えば、ハードウェアやソフトウェアの制約のために） 5 マイクロ秒の精度の時刻値を提供できない場合、ブラウザーはその値をミリ秒の精度の時刻として表すことができます。

以下のコード例では、DOMHighResTimeStamp と Performance.now() メソッドを使用することを示します。Domxref("Performance.now", "now()")}} メソッドは、離散的な時点である タイムスタンプ (DOMHighResTimeStamp 型)を返します。タスクの前後にこのメソッドを呼び出すことで、タスクの実行にかかる時刻を計測することができます。

function calculate_time() {
  let startTime;
  let endTime;

  startTime = performance.now();
  do_task();
  endTime = performance.now();

  return (endTime - startTime);
}

Performance オブジェクトのシリアライズ

Performance オブジェクトの JSON シリアライズは toJSON() メソッドで行います。以下の例では、 Performance, Performance.timing, Performance.navigation オブジェクトに対する JSON シリアライズ結果が output 要素に表示されます。

function print_json() {
  const output = document.getElementsByTagName("output")[0];

  if (window.performance.toJSON === undefined) {
    output.textContent += `window.performance.toJSON() is NOT supported`;
  } else {
    const json = window.performance.toJSON();

    // Print the performance object
    output.textContent = `performance = ${JSON.stringify(json)} \n`;

    // Print the performance.timing and performance.navigation objects
    const timing = json.timing;
    output.textContent += `performance.timing = ${JSON.stringify(timing)} \n`;

    const navigation = json.navigation;
    output.textContent += `performance.navigation = ${JSON.stringify(navigation)} \n`;
  }
}

仕様書

この記事内で記述されたインターフェイスは、 2 つのレベルがある High Resolution Time 規格で定義されています。

相互運用性

Performance インターフェイスのブラウザー互換性表に示すように、 Performance インターフェイスのほとんどは、デスクトップブラウザーで広く実装されています。

関連情報