PerformanceElementTiming: Eigenschaft renderTime

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die renderTime-Eigenschaft (schreibgeschützt) der Schnittstelle PerformanceElementTiming gibt die Renderzeit des zugehörigen Elements zurück.

Wert

Ein DOMHighResTimeStamp mit der Renderzeit des Elements.

Für Bilder wird dies der Bild-Rendering-Zeitstempel sein. Dies ist definiert als die nächste Darstellung, die erfolgt, nachdem das Bild vollständig geladen wurde. Wenn die Timing-Erlaubnis-Prüfung fehlschlägt (wie durch den Timing-allow-origin Header definiert), wird 0 zurückgegeben.

Für Textknoten wird dies der Text-Rendering-Zeitstempel sein. Dies ist definiert, wenn das Element als Text gerendert wird.

Beispiele

renderTime protokollieren

In diesem Beispiel wird ein <img>-Element beobachtet, indem das Attribut elementtiming hinzugefügt wird. Ein PerformanceObserver wird registriert, um alle Performance-Einträge vom Typ "element" zu erhalten, und das buffered-Flag wird verwendet, um auf Daten vor der Observer-Erstellung zuzugreifen. Das Aufrufen von entry.renderTime gibt die Renderzeit des Bildelements zurück.

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.renderTime);
    }
  });
});
observer.observe({ type: "element", buffered: true });

Renderzeit von Cross-Origin-Bildern

Aus Sicherheitsgründen war der Wert der renderTime-Eigenschaft ursprünglich 0, wenn die Ressource eine Cross-Origin-Anfrage ist. Stattdessen sollte die loadTime-Eigenschaft als Fallback verwendet werden.

Browser können jetzt eine leicht grob granulierte Renderzeit bereitstellen in diesen Situationen. Überprüfen Sie die Browser-Unterstützung.

Um genauere Informationen zur Cross-Origin-Renderzeit bereitzustellen, muss der HTTP-Antwort-Header Timing-Allow-Origin gesetzt werden.

Zum Beispiel, um https://developer.mozilla.org eine genaue renderTime anzuzeigen, sollte die Cross-Origin-Ressource senden:

http
Timing-Allow-Origin: https://developer.mozilla.org

Alternativ können Sie startTime verwenden, die den Wert der renderTime des Eintrags zurückgibt, wenn er nicht 0 ist, und andernfalls den Wert der loadTime dieses Eintrags. Es wird jedoch empfohlen, den Timing-Allow-Origin-Header zu setzen, damit die Metriken genauer sind.

Wenn Sie startTime verwenden, können Sie Ungenauigkeiten kennzeichnen, indem Sie überprüfen, ob renderTime verwendet wurde:

js
const isRenderTime = entry.renderTime ? true : false;

Spezifikationen

Specification
Element Timing API
# ref-for-dom-performanceelementtiming-rendertime①

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
renderTime
Experimental
Cross-origin
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.