パフォーマンスタイムラインの使用

パフォーマンスタイムライン 規格は、アプリケーション内でクライアント側の待ち時間の測定をサポートするための Performance インターフェイスへの拡張を定義します。この規格には、特定のパフォーマンスイベントが発生したときにアプリケーションに通知することを可能にするインターフェイスも含まれています。同時に、これらのインターフェイスを使用してアプリケーションのパフォーマンスボトルネックを特定することができます。

パフォーマンス拡張

パフォーマンスタイムライン は Performance オブジェクトを拡張し、指定したフィルター条件に応じて パフォーマンス記録（指標） の集合を取得するための異なる形を提供する 3 つのメソッドを備えています。以下の例では、これらのメソッド getEntries(), getEntriesByName(), getEntriesByType() を使用した場合を示しています。

function log(s) {
  const o = document.getElementsByTagName("output")[0];
  o.innerHTML += `${s} <br>`;
}

function doWork(n) {
  for (let i = 0; i < n; i++) {
     const m = Math.random(); // This is an example of work taking some time
  }
}

function printPerfEntry(pe) {
  log(`name: ${pe.name}`);
  log(`entryType: ${pe.entryType}`);
  log(`startTime: ${pe.startTime}`);
  log(`duration: ${pe.duration}`);
}

function printPerformanceEntries() {
  if (performance.mark === undefined) {
    console.error("The property performance.mark is not supported.");
    return;
  }

  // Create some performance entries via the mark() and measure() methods
  performance.mark("Begin");
  doWork(50000);
  performance.mark("End");
  doWork(50000);
  performance.measure("Measure1", "Begin", "End");

  // Use getEntries() to iterate all entries
  performance.getEntries()
    .forEach((entry, i) => {
      log(`All Entry[${i}]`);
      printPerfEntry(entry);
    });

  // Use getEntries(name, entryType) to get specific entries
  performance.getEntries({ name: "Measure1", entryType: "measure" })
    .forEach((entry, i) => {
      log(`Begin and Measure [${i}]`);
      printPerfEntry(entry);
    });

  // Use getEntriesByType() to get all "mark" entries
  performance.getEntriesByType("mark")
    .forEach((entry, i) => {
      log(`Mark only [${i}]`);
      printPerfEntry(entry);
    });

  // Use getEntriesByName() to get all "mark" entries named "Begin"
  performance.getEntriesByName("Begin", "mark")
    .forEach((entry, i) => {
      log(`Begin and Mark [${i}]`);
      printPerfEntry(entry);
    });
}

PerformanceEntry インターフェイス

この インターフェイスは、単一のパフォーマンス項目、すなわち単一のパフォーマンスメトリックをカプセル化します。このインターフェイスは 4 つのプロパティと JSON シリアライザー (toJSON()) を保有しています。以下の例では、これらのプロパティを使用することを示します。

function printPerformanceEntry(ev) {
  const properties = ["name", "entryType", "startTime", "duration"];

  // Create a few performance entries
  performance.mark("Start");
  doWork(50000);
  performance.mark("Stop");
  performance.measure("measure-1");

  performance.getEntries()
    .forEach((perfEntry, i) => {
      log(`PerfEntry[${i}]`);
      properties.forEach((prop) => {
        // Check each property in window.performance
        const supported = prop in perfEntry;
        log(`… ${prop} = ${supported ? perfEntry[prop] : "Not supported"}`);
      });
    });
}

このインターフェイスは PerformanceEntry オブジェクトのシリアライズを返す toJSON() メソッドも記載しています。以下の例では、このメソッドを使用することを示します。

function perfEntryToJSON() {
  // Create a few performance entries
  performance.mark("mark-1");
  performance.mark("mark-2");
  performance.measure("meas-1", "mark-1", "mark-2");

  const peList = performance.getEntries();
  const pe = peList[0];

  if (pe.toJSON === undefined) {
    log ("PerformanceEntry.toJSON() is NOT supported");
    return;
  }

  // Print the PerformanceEntry object
  const json = pe.toJSON();
  const s = JSON.stringify(json);
  log(`PerformanceEntry.toJSON = ${s}`);
}

パフォーマンスオブザーバー

パフォーマンスオブザーバーのインターフェイスは、アプリケーションが特定のパフォーマンスイベントの種類のオブザーバーを登録することを可能にし、それらのイベントの種類の 1 つが記録されたとき、アプリケーションはオブザーバーが作成されたときに指定されたオブザーバーのコールバック関数によってイベントの_通知を受ける。オブザーバー（コールバック）が呼び出されたとき、コールバックの引数にはパフォーマンスオブザーバー項目リストが含まれ、監視されているパフォーマンス項目だけを収めます。つまり、このリストにはオブザーバーの observe() メソッドを呼び出したときに指定されたイベントの種類の項目のみが収められています。

以下の例では、 2 つのオブザーバーを登録する方法を示しています。最初のオブザーバーは、いくつかのイベント種別に対して登録し、 2 つ目のオブザーバーは 1 つのイベント種別に対してのみ登録します。

function PerformanceObservers() {
  // Create observer for all performance event types
  const observeAll = new PerformanceObserver((list, obs) => {
    // Print all entries
    list.getEntries().forEach((entry) => {
      printPerfEntry(entry);
    });

    // Print entries named "Begin" with type "mark"
    list.getEntriesByName("Begin", "mark").forEach((entry) => {
      printPerfEntry(entry);
    });

    // Print entries with type "mark"
    list.getEntriesByType("mark").forEach((entry) => {
      printPerfEntry(entry);
    });
  });

  // Subscribe to all performance event types
  observeAll.observe({
    entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server'],
  });

  // Create observer for just the "mark" event type
  const observeMark = new PerformanceObserver((list, obs) => {
    // Should only have 'mark' entries
    list.getEntries().forEach((entry) =>  {
      printPerfEntry(entry);
    });
  });

  // Subscribe to only the 'mark' event
  observeMark.observe({ entryTypes: ['mark'] });
}

function printPerfEntry(pe) {
  log(`name: ${pe.name}`);
  log(`entryType: ${pe.entryType}`);
  log(`startTime: ${pe.startTime}`);
  log(`duration: ${pe.duration}`);
}

パフォーマンスオブザーバー項目リスト インターフェイスは Performance インターフェイスと同じ3つの getEntries*() メソッドを保有し、これらのメソッドはオブザーバーコールバック内で observed パフォーマンス項目を取得するために使用されます。これらのメソッドは上記の例で使用されています。

関連情報