パフォーマンス オブザーバー - パフォーマンス データに効率的にアクセス

プログレッシブ ウェブアプリを使用すると、信頼性が高く高性能なユーザー エクスペリエンスを提供できる新しいクラスのアプリケーションを構築できます。しかし、ウェブアプリが目的のパフォーマンス目標を達成するためには、デベロッパーは高解像度のパフォーマンス測定データにアクセスする必要があります。W3C Performance Timeline 仕様では、ブラウザが低レベルのタイミング データにプログラムでアクセスできるようにするためのインターフェースを定義しています。これにより、次のような興味深いユースケースへの扉が開かれます。

  • オフラインとカスタムのパフォーマンス分析
  • サードパーティのパフォーマンス分析および可視化ツール
  • IDE やその他のデベロッパー ツールに統合されたパフォーマンス評価

ナビゲーションのタイミングリソースのタイミングカスタム速度に関しては、ほとんどの主要なブラウザで、この種のタイミング データがすでに利用できます。新たに追加されたのはパフォーマンス オブザーバー インターフェースです。これは基本的には、ブラウザによって収集された低レベルのタイミング情報を非同期で収集するストリーミング インターフェースです。この新しいインターフェースには、タイムラインにアクセスするための以前のメソッドと比べて、いくつかの重要な利点があります。

  • 現在、アプリは保存されている測定値を定期的にポーリングして比較する必要があり、コストがかかります。このインターフェースはコールバックを提供します。(言い換えると、ポーリングの必要はありません)。その結果、この API を使用するアプリの応答性と効率性が向上します。
  • バッファ制限の対象ではなく(ほとんどのバッファはデフォルトで 150 アイテムに設定されています)、バッファの変更が必要になるような異なるコンシューマ間の競合状態を回避できます。
  • パフォーマンス オブザーバーの通知は非同期で配信され、ブラウザは重要なレンダリング処理との競合を避けるため、アイドル状態の間にこれをディスパッチできます。

Chrome 52 以降、パフォーマンス オブザーバー インターフェースはデフォルトで有効になっています。使用方法を見ていきましょう。

<html>
<head>
    <script>
    var observer = new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
        // Display each reported measurement on console
        if (console) {
            console.log("Name: "       + entry.name      +
                        ", Type: "     + entry.entryType +
                        ", Start: "    + entry.startTime +
                        ", Duration: " + entry.duration  + "\n");
        }
        })
    });
    observer.observe({entryTypes: ['resource', 'mark', 'measure']});
    performance.mark('registered-observer');

    function clicked(elem) {
        performance.measure('button clicked');
    }
    </script>
</head>
<body>
    <button onclick="clicked(this)">Measure</button>
</body>
</html>

このシンプルなページは、JavaScript コードを定義するスクリプトタグから始まります。

  • 新しい PerformanceObserver オブジェクトをインスタンス化し、イベント ハンドラ関数をオブジェクトのコンストラクタに渡します。コンストラクタはオブジェクトを初期化し、新しい測定データのセットを処理する準備が整う(測定データをオブジェクトのリストとして渡される)たびにハンドラが呼び出されるようにします。ここではハンドラを、書式設定された測定データをコンソールに表示するだけの匿名関数として定義されています。実際のシナリオでは、このデータは、その後の分析のためにクラウドに保存したり、インタラクティブな可視化ツールにパイプで渡したりします。
  • observe() メソッドを使用して対象となるタイミング イベントのタイプに登録し、mark() メソッドを呼び出して、登録した時刻をマークします。これにより、タイミング間隔の開始が考慮されます。
  • Google では、ページ本文で定義されたボタンのクリック ハンドラを定義します。このクリック ハンドラは、measure() メソッドを呼び出して、ボタンがクリックされた時点のタイミング データを取得します。

ページの本体でボタンを定義し、クリック ハンドラを onclick イベントに割り当てるだけで、準備完了です。

これで、ページを読み込んで Chrome DevTools パネルを開いて JavaScript コンソールを監視すると、ボタンをクリックするたびにパフォーマンスの測定が行われます。また、このような測定値はモニタリングに登録されているため、タイムラインをポーリングすることなく、イベント ハンドラに非同期で転送されます。測定値が発生すると、コンソールに表示されます。

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

start 値は、mark タイプのイベント(このアプリに 1 つしかないもの)の開始タイムスタンプを表します。measure タイプのイベントには固有の開始時間がありません。最後の mark イベントを基準にして測定された時間の測定値を表します。したがって、ここに示す期間値は、共通の間隔の始点となる mark() の呼び出しから、その後の measure() の複数回の呼び出しまでの経過時間を表します。

ご覧のとおり、この API は非常にシンプルで、ポーリングなしでフィルタリングされた高解像度のリアルタイム パフォーマンス データを収集できます。これにより、ウェブアプリ用のより効率的なパフォーマンス ツールへの扉が開かれます。