PerformanceElementTiming

解説

要素タイミング API の目的は、ウェブ開発者や分析ツールにページ上の重要な要素のレンダリングタイムスタンプを測定する機能を提供することです。

API は以下の要素のタイミング情報に対応しています。

• <img> 要素
• <image> 要素（<svg> 内）
• ポスター画像（<video> 要素）
• background-image がある要素
• テキストノードのグループ、 <p> など

作者は要素に elementtiming 属性を追加することで、監視のためのフラグを立てます。

PerformanceElementTiming は PerformanceEntry を継承しています。

インスタンスプロパティ

このインターフェイスは、以下のイベントタイミングパフォーマンス項目型である PerformanceEntry プロパティを以下のように修飾して拡張しています。

PerformanceEntry.duration 読取専用 Experimental

常に 0 を返します。 duration はこのインターフェイスでは利用できません。

PerformanceEntry.entryType 読取専用 Experimental

常に "element" を返します。

PerformanceEntry.name 読取専用 Experimental

画像には "image-paint" を返し、テキストには "text-paint" を返します。

PerformanceEntry.startTime 読取専用 Experimental

この項目の renderTime の値が 0 でない場合はその値を返し、そうでない場合はこの項目の loadTime の値を返します。

このインターフェイスは以下のプロパティにも対応しています。

PerformanceElementTiming.element 読取専用 Experimental

情報を返す要素を表す Element です。

PerformanceElementTiming.id 読取専用 Experimental

要素の id である文字列です。

PerformanceElementTiming.identifier 読取専用 Experimental

要素の elementtiming 属性の値である文字列です。

PerformanceElementTiming.intersectionRect 読取専用 Experimental

ビューポート内の要素の矩形である DOMRectReadOnly です。

PerformanceElementTiming.loadTime 読取専用 Experimental

要素の読み込み時間を持つ DOMHighResTimeStamp です。

PerformanceElementTiming.naturalHeight 読取専用 Experimental

符号なし 32 ビット整数 (unsigned long) で、これが画像に適用されているときは画像の内在的な高さを表し、テキストのときは 0 です。

PerformanceElementTiming.naturalWidth 読取専用 Experimental

符号なし 32 ビット整数 (unsigned long) で、これが画像に適用されているときは画像の内在的な幅を表し、テキストのときは 0 です。

PerformanceElementTiming.renderTime 読取専用 Experimental

要素の描画時間を持つ DOMHighResTimeStamp です。

PerformanceElementTiming.url 読取専用 Experimental

画像の場合はリソースをリクエストする初期 URL となる文字列です。テキストの場合は 0 です。

インスタンスメソッド

PerformanceElementTiming.toJSON() Experimental

PerformanceElementTiming オブジェクトを JSON で返します。

例

固有の要素のレンダリング時間の監視

この例では、 elementtiming 属性を追加することで、 2 つの要素を監視しています。 PerformanceObserver は "element" 型のパフォーマンス項目をすべて取得するために登録され、 buffered フラグを使用してオブザーバー作成前のデータにアクセスしています。

<img src="image.jpg" elementtiming="big-image" />
<p elementtiming="text" id="text-id">text here</p>

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

2 つの項目がコンソールに出力されます。最初の項目は画像の詳細を格納し、 2 つ目はテキストノードの詳細を格納します。

仕様書

ブラウザーの互換性

関連情報

• elementtiming HTML 属性