PerformanceElementTiming: renderTime プロパティ
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
renderTime
は PerformanceElementTiming
インターフェイスの読み取り専用プロパティで、関連付けられた要素の描画時刻を返します。
値
その要素の描画時間を表す DOMHighResTimeStamp
です。
画像の場合、これは画像の描画タイムスタンプになります。これは画像が完全に読み込まれた後に発生する次のペイントとして定義されます。Timing-allow-origin ヘッダーによって定義されています。タイミング許可チェックが失敗した場合、これは 0
を返します。
テキストノードの場合、これは テキスト描画タイムスタンプ になります。これは、要素にテキストが描画されるようになったタイミングを定義します。
例
renderTime
のログ出力
この例では、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;
仕様書
Specification |
---|
Element Timing API # ref-for-dom-performanceelementtiming-rendertime① |
ブラウザーの互換性
BCD tables only load in the browser