PerformanceElementTiming: renderTime-Eigenschaft

Ein DOMHighResTimeStamp mit der Renderzeit des Elements.

Für Bilder ist dies der Bild-Rendering-Zeitstempel. Dieser ist definiert als der nächste Paint-Vorgang nach dem vollständigen Laden des Bildes. Wenn die Timing-Allow-Prüfung fehlschlägt (wie im Timing-allow-origin-Header definiert), wird 0 zurückgegeben.

Für Textknoten ist dies der Text-Rendering-Zeitstempel. Dieser ist definiert als der Zeitpunkt, an dem das Element als Text gemalt wird.

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

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

Aus Sicherheitsgründen ist der Wert der renderTime-Eigenschaft 0, wenn die Ressource eine Cross-Origin-Anfrage ist. Um Informationen zur Renderzeit von Cross-Origin-Ressourcen offenzulegen, muss der Timing-Allow-Origin HTTP-Antwort-Header gesetzt werden.

Zum Beispiel sollte die Cross-Origin-Ressource, um https://developer.mozilla.org die Ansicht der renderTime zu ermöglichen, Folgendes senden:

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

Alternativ können Sie startTime verwenden, das den Wert von renderTime der Eintragung zurückgibt, wenn dieser nicht 0 ist, und ansonsten den Wert von loadTime dieser Eintragung. 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:

const isRenderTime = entry.renderTime ? true : false;