PerformanceElementTiming: toJSON() メソッド

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

toJSON() は PerformanceElementTiming インターフェイスのメソッドで、シリアライザーです。 PerformanceElementTiming オブジェクトの JSON 表現を返します。

構文

js
toJSON()

引数

なし。

返値

JSON オブジェクトです。これは、 PerformanceElementTiming オブジェクトをシリアライズしたものです。

JSON には element プロパティが格納されませんが、これが Element 型の一種であり、toJSON() 操作を提供していないからです。しかし、要素の id は提供されます。

例

toJSON メソッドの使用

この例では、entry.toJSON() を呼び出すと、画像要素の情報を含む PerformanceElementTiming オブジェクトの JSON 表現が返されます。

html
<img
  src="image.jpg"
  alt="a nice image"
  elementtiming="big-image"
  id="myImage" />
js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.toJSON());
    }
  });
});
observer.observe({ type: "element", buffered: true });

This would log a JSON object like so:

json
{
  "name": "image-paint",
  "entryType": "element",
  "startTime": 670894.1000000238,
  "duration": 0,
  "renderTime": 0,
  "loadTime": 670894.1000000238,
  "intersectionRect": {
    "x": 299,
    "y": 76,
    "width": 135,
    "height": 155,
    "top": 76,
    "right": 434,
    "bottom": 231,
    "left": 299
  },
  "identifier": "big-image",
  "naturalWidth": 135,
  "naturalHeight": 155,
  "id": "myImage",
  "url": "https://en.wikipedia.org/static/images/project-logos/enwiki.png"
}

JSON 文字列を取得するには、 JSON.stringify(entry) を直接使用することができます。これが toJSON() を自動的に呼び出します。

仕様書

Specification
Element Timing API
# dom-performanceelementtiming-tojson

ブラウザーの互換性

BCD tables only load in the browser

関連情報