PerformanceElementTiming

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

PerformanceElementTiming インターフェイスは、開発者が elementtiming 属性で記述した画像やテキストのノード要素の描画タイミング情報を保持します。

解説

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

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

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

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

PerformanceEntry PerformanceElementTiming

インスタンスプロパティ

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

PerformanceEntry.duration 読取専用

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

PerformanceEntry.entryType 読取専用

常に "element" を返します。

PerformanceEntry.name 読取専用

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

PerformanceEntry.startTime 読取専用

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

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

PerformanceElementTiming.element 読取専用

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

PerformanceElementTiming.id 読取専用

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

PerformanceElementTiming.identifier 読取専用

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

PerformanceElementTiming.intersectionRect 読取専用

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

PerformanceElementTiming.loadTime 読取専用

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

PerformanceElementTiming.naturalHeight 読取専用

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

PerformanceElementTiming.naturalWidth 読取専用

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

PerformanceElementTiming.renderTime 読取専用

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

PerformanceElementTiming.url 読取専用

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

インスタンスメソッド

PerformanceElementTiming.toJSON()

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

例

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

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

html
<img src="image.jpg" elementtiming="big-image" />
<p elementtiming="text" id="text-id">text here</p>
js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});
observer.observe({ type: "element", buffered: true });

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

仕様書

Specification
Element Timing API
# sec-performance-element-timing

ブラウザーの互換性

BCD tables only load in the browser

関連情報