PerformanceElementTiming: renderTime-Eigenschaft

Wert

Ein DOMHighResTimeStamp, der den Zeitpunkt angibt, zu dem das Element gerendert wurde.

Bei Bildern ist dies der Zeitstempel für das Rendern des Bildes. Er entspricht dem nächsten Zeichenvorgang, nachdem das Bild vollständig geladen wurde. Wenn die Timing-Allow-Prüfung fehlschlägt (wie durch den Header Timing-Allow-Origin definiert), wird 0 zurückgegeben.

Bei Textknoten ist dies der Zeitstempel für das Rendern des Textes. Er gibt an, wann der Text des Elements gezeichnet wird.

Renderzeit von Bildern aus anderen Ursprüngen

Aus Sicherheitsgründen war der Wert der Eigenschaft renderTime ursprünglich 0, wenn die Ressource über eine ursprungsübergreifende Anfrage geladen wurde. Stattdessen sollte die Eigenschaft loadTime als Ersatzwert verwendet werden.

Browser können in diesen Fällen inzwischen eine etwas weniger genaue Renderzeit bereitstellen. Prüfen Sie die Browser-Unterstützung.

Um genauere Informationen zur Renderzeit von Ressourcen aus anderen Ursprüngen bereitzustellen, muss der HTTP-Antwortheader Timing-Allow-Origin gesetzt werden.

Damit beispielsweise https://developer.mozilla.org einen genauen renderTime-Wert sehen kann, sollte die Ressource aus einem anderen Ursprung Folgendes senden:

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

Alternativ können Sie startTime verwenden. Diese Eigenschaft gibt den renderTime-Wert des Eintrags zurück, sofern er nicht 0 ist, andernfalls den Wert von loadTime. Es wird jedoch empfohlen, den Header Timing-Allow-Origin zu setzen, damit die Messwerte genauer sind.

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

const isRenderTime = Boolean(entry.renderTime);

Beispiele

renderTime protokollieren

In diesem Beispiel wird ein <img>-Element mithilfe des Attributs elementtiming beobachtet. Ein PerformanceObserver wird registriert, um alle Performance-Einträge vom Typ "element" abzurufen. Mit dem Flag buffered können auch Daten aus der Zeit vor der Erstellung des Observers abgerufen werden. Der Aufruf von entry.renderTime gibt den Zeitpunkt zurück, zu dem das Bildelement gerendert wurde.

<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 });

Spezifikationen

Browser-Kompatibilität