PerformanceElementTiming: Methode toJSON()
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die Methode toJSON() der Schnittstelle PerformanceElementTiming gibt ein JSON-serialisierbares einfaches Objekt zurück, das das PerformanceElementTiming-Objekt repräsentiert.
Die Methode wird von JSON.stringify() automatisch aufgerufen, wenn bei der JSON-Serialisierung ein PerformanceElementTiming-Objekt angetroffen wird.
Syntax
toJSON()
Parameter
Keine.
Rückgabewert
Ein JSON-serialisierbares einfaches Objekt mit den folgenden Eigenschaften:
nameentryTypestartTimedurationnavigationIdpaintTimepresentationTimerenderTimeloadTimeintersectionRectidentifiernaturalWidthnaturalHeightidurl
Der Wert jeder Eigenschaft wird unverändert kopiert. Wenn das zurückgegebene Objekt an JSON.stringify() übergeben wird, wird die Eigenschaft intersectionRect zusätzlich mithilfe von DOMRectReadOnly.toJSON() serialisiert.
Das zurückgegebene Objekt enthält die Eigenschaft element nicht, da Element keine toJSON()-Operation bereitstellt. Die id des Elements wird jedoch bereitgestellt.
Beispiele
toJSON() direkt aufrufen
In diesem Beispiel wird ein PerformanceElementTiming-Objekt abgerufen. Ein direkter Aufruf von toJSON() gibt ein einfaches Objekt zurück. Seine Eigenschaften haben dieselben Werte wie die entsprechenden Eigenschaften des ursprünglichen Objekts.
<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") {
const json = entry.toJSON();
console.log(json); // A plain object
console.log(typeof json); // "object"
console.log(json.identifier); // Same value as entry.identifier
}
});
});
observer.observe({ type: "element", buffered: true });
In einen JSON-String serialisieren
Innerhalb der Callback-Funktion aus dem vorherigen Beispiel kann dasselbe Objekt mit JSON.stringify() serialisiert werden. Dabei wird die Methode toJSON() automatisch aufgerufen.
console.log(JSON.stringify(entry));
Dadurch würde ein JSON-String wie der folgende protokolliert (zur besseren Lesbarkeit formatiert):
{
"name": "image-paint",
"entryType": "element",
"startTime": 670900.5,
"duration": 0,
"navigationId": 2463,
"paintTime": 670898.25,
"presentationTime": 670900.5,
"renderTime": 670900.5,
"loadTime": 670894.25,
"intersectionRect": {
"x": 299.25,
"y": 76.25,
"width": 135.5,
"height": 155.5,
"top": 76.25,
"right": 434.75,
"bottom": 231.75,
"left": 299.25
},
"identifier": "big-image",
"naturalWidth": 135,
"naturalHeight": 155,
"id": "myImage",
"url": "https://en.wikipedia.org/static/images/project-logos/enwiki.png"
}
Spezifikationen
| Spezifikation |
|---|
| Element Timing API # dom-performanceelementtiming-tojson |