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