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

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

  • オフラインとカスタムのパフォーマンス分析
  • サードパーティのパフォーマンス分析ツールとビジュアリゼーション ツール
  • 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() メソッドを呼び出して登録した瞬間をマークします。この瞬間がタイミング インターバルの開始点になります。
  • ページ本文で定義されたボタンのクリック ハンドラを定義します。このクリック ハンドラは measure() メソッドを呼び出して、ボタンがクリックされたときのタイミング データをキャプチャします。

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

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

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

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

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