PerformanceElementTiming: renderTime プロパティ

その要素の描画時間を表す DOMHighResTimeStamp です。

画像の場合、これは画像の描画タイムスタンプになります。これは画像が完全に読み込まれた後に発生する次のペイントとして定義されます。Timing-allow-origin ヘッダーによって定義されています。タイミング許可チェックが失敗した場合、これは 0 を返します。

テキストノードの場合、これは テキスト描画タイムスタンプ になります。これは、要素にテキストが描画されるようになったタイミングを定義します。

この例では、elementtiming 属性を追加して <image> 要素を監視しています。 PerformanceObserver は "element" 型のパフォーマンス項目をすべて取得するために登録され、オブザーバー作成前のデータにアクセスするために buffered フラグを用います。 entry.renderTime を呼び出すと、画像要素のレンダリング時刻を返します。

<img
  src="image.jpg"
  alt="a nice image"
  elementtiming="big-image"
  id="myImage" />

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.renderTime);
    }
  });
});
observer.observe({ type: "element", buffered: true });

セキュリティ上の理由から、リソースがオリジン間リクエストである場合、 renderTime プロパティの値は 0 です。オリジン間のレンダリング時刻情報を公開するには、Timing-Allow-Origin HTTP レスポンスヘッダーを設定する必要があります。HTTP レスポンスヘッダーを設定する必要があります。

例えば、https://developer.mozilla.org で renderTime が見られるようにするには、オリジン間リソースは次のように送信します。

Timing-Allow-Origin: https://developer.mozilla.org

別の方法として、 startTime を使用することもできます。この場合、項目の renderTime の値が 0 でなければその値を返し、そうでなければこの項目の loadTime の値を返します。ただし、指標をより正確なものにするために、 Timing-Allow-Origin ヘッダーを設定することをお勧めします。

startTime を使用した場合、renderTime が使用されたかどうかを調べることで、不正確さにフラグを立てることができます。

const isRenderTime = entry.renderTime ? true : false;