PerformanceElementTiming: Eigenschaft renderTime

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

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

Die renderTime schreibgeschützte Eigenschaft des PerformanceElementTiming-Interfaces gibt die Renderzeit des zugehörigen Elements zurück.

In diesem Artikel

Wert

Ein DOMHighResTimeStamp mit der Renderzeit des Elements.

Für Bilder ist dies der Bild-Renderzeitstempel. Dieser wird als der nächste Zeichenvorgang definiert, der nach dem vollständigen Laden des Bildes auftritt. Wenn die Timing-Erlaubnisprüfung fehlschlägt (wie durch den Timing-Allow-Origin-Header definiert), wird 0 zurückgegeben.

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

Beispiele

Protokollierung von renderTime

In diesem Beispiel wird ein <img>-Element beobachtet, indem das Attribut elementtiming hinzugefügt wird. Ein PerformanceObserver wird registriert, um alle Leistungsdaten von Typ "element" zu erhalten, und das buffered-Flag wird verwendet, um auf Daten zuzugreifen, die vor der Erstellung des Beobachters existieren. Durch Aufrufen von entry.renderTime wird die Renderzeit des Bildelements zurückgegeben.

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 gröbere Renderzeit in diesen Situationen offenlegen. Überprüfen Sie die Browser-Unterstützung.

Um genauere Cross-Origin-Renderzeit-Informationen offenzulegen, muss der Timing-Allow-Origin HTTP-Antwortheader gesetzt werden.

Ein Beispiel: Um https://developer.mozilla.org zu erlauben, eine genaue renderTime zu sehen, sollte die Cross-Origin-Ressource senden:

http

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

Alternativ können Sie startTime verwenden, welche den Wert von renderTime zurückgibt, falls dieser nicht 0 ist, und ansonsten den Wert von loadTime. 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 prüfen, ob renderTime benutzt wurde:

const isRenderTime = Boolean(entry.renderTime);

Spezifikationen

Spezifikation

Element Timing API
# dom-performanceelementtiming-rendertime

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Performance APIs
PerformanceElementTiming
Instanzeigenschaften
Instanzmethoden
1. toJSON()
Vererbung
1. PerformanceEntry
Verwandte Seiten für Performance API
Anleitungen
1. Leistungsdaten
2. Hochpräzise Zeitmessung
3. Lange Animationsrahmen-Timing
4. Resource timing
5. Navigation timing
6. User timing
7. Server Timing
8. Überwachen von bfcache-Blockierungsgründen