PerformanceElementTiming

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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Das PerformanceElementTiming-Interface enthält Render-Zeitinformationen für Bild- und Textknotenelemente, die der Entwickler mit einem elementtiming-Attribut zur Beobachtung versehen hat.

Beschreibung

Das Ziel der Element Timing API ist es, Webentwicklern oder Analysetools die Möglichkeit zu geben, die Rendering-Zeitstempel von kritischen Elementen auf einer Seite zu messen.

Die API unterstützt Zeitinformationen auf den folgenden Elementen:

<img>-Elemente,
<image>-Elemente innerhalb eines <svg>,
poster-Bilder von <video>-Elementen,
Elemente, die eine inhaltsvolle background-image-Eigenschaft mit einem URL-Wert für eine tatsächlich verfügbare Ressource haben, und
Gruppen von Textknoten, wie ein <p>.

Der Autor markiert ein Element zur Beobachtung, indem er das elementtiming-Attribut am Element hinzufügt.

PerformanceElementTiming erbt von PerformanceEntry.

Instanz-Eigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

PerformanceElementTiming.element Schreibgeschützt: Ein Element, das das Element repräsentiert, über das wir Informationen zurückgeben.
PerformanceElementTiming.id Schreibgeschützt: Ein String, der die id des Elements ist.
PerformanceElementTiming.identifier Schreibgeschützt: Ein String, der den Wert des elementtiming-Attributs am Element enthält.
PerformanceElementTiming.intersectionRect Schreibgeschützt: Ein DOMRectReadOnly, das das Rechteck des Elements im Ansichtsfenster ist.
PerformanceElementTiming.loadTime Schreibgeschützt: Ein DOMHighResTimeStamp mit der Ladezeit des Elements.
PerformanceElementTiming.naturalHeight Schreibgeschützt: Ein nicht-signierter 32-Bit-Integer (unsigned long), der die intrinsische Höhe des Bildes ist, wenn dies auf ein Bild angewendet wird, 0 für Text.
PerformanceElementTiming.naturalWidth Schreibgeschützt: Ein nicht-signierter 32-Bit-Integer (unsigned long), der die intrinsische Breite des Bildes ist, wenn dies auf ein Bild angewendet wird, 0 für Text.
PerformanceElementTiming.paintTime: Gibt den timestamp zurück, wann die Rendering-Phase endete und die Malphase begann.
PerformanceElementTiming.presentationTime: Gibt den timestamp zurück, wann das Element tatsächlich auf dem Bildschirm gezeichnet wurde.
PerformanceElementTiming.renderTime Schreibgeschützt: Ein DOMHighResTimeStamp mit der Renderzeit des Elements.
PerformanceElementTiming.url Schreibgeschützt: Ein String, der die anfängliche URL der Ressourcenanforderung für Bilder ist, 0 für Text.

Es erweitert auch die folgenden PerformanceEntry-Eigenschaften, indem sie qualifiziert und eingeschränkt werden, wie beschrieben:

PerformanceEntry.duration Schreibgeschützt: Gibt immer 0 zurück, da duration auf dieses Interface nicht anwendbar ist.
PerformanceEntry.entryType Schreibgeschützt: Gibt immer "element" zurück.
PerformanceEntry.name Schreibgeschützt: Gibt "image-paint" für Bilder und "text-paint" für Text zurück.
PerformanceEntry.startTime Schreibgeschützt: Gibt den Wert von renderTime dieses Eintrags zurück, wenn dieser nicht 0 ist, andernfalls den Wert von loadTime dieses Eintrags.

Instanz-Methoden

PerformanceElementTiming.toJSON(): Überschreibt die PerformanceEntry.toJSON()-Methode, um eine JSON-Darstellung des PerformanceElementTiming-Objekts zurückzugeben.

In diesem Beispiel werden zwei Elemente beobachtet, indem das elementtiming-Attribut hinzugefügt wird. Ein PerformanceObserver wird registriert, um alle Leistungsdatensätze des Typs "element" zu erhalten, und das buffered-Flag wird verwendet, um auf Daten zuzugreifen, die vor der Erstellung des Beobachters verfügbar sind.

html

<img src="image.jpg" elementtiming="big-image" />
<p elementtiming="text" id="text-id">text here</p>

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});
observer.observe({ type: "element", buffered: true });

Zwei Einträge werden an die Konsole ausgegeben: Der erste enthält Details des Bildes, der zweite Details des Textknotens.

Beobachtung separater Mal- und Präsentationszeiten

Die paintTime- und presentationTime-Eigenschaften ermöglichen es Ihnen, spezifische Zeiten für den Beginn der Malphase und das Zeichnen des Elements auf dem Bildschirm abzurufen. Die paintTime ist weitgehend interoperabel, während die presentationTime implementierungsabhängig ist.

Dieses Beispiel verwendet einen PerformanceObserver, um alle Leistungsdatensätze des Typs "element" zu beobachten (denken Sie daran, dass zu beobachtende Elemente elementtiming-Attribute gesetzt haben müssen). Wir prüfen, ob paintTime und presentationTime unterstützt werden und rufen diese Werte ab, wenn sie verfügbar sind. In nicht unterstützenden Browsern ruft der Code die renderTime oder loadTime ab, abhängig davon, was unterstützt wird.

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach((entry) => {
    if (entry.presentationTime) {
      console.log(
        "Element paintTime:",
        entry.paintTime,
        "Element presentationTime:",
        entry.presentationTime,
      );
    } else if (entry.paintTime) {
      console.log("Element paintTime:", entry.paintTime);
    } else if (entry.renderTime) {
      console.log("Element renderTime:", entry.renderTime);
    } else {
      console.log("Element loadTime", entry.loadTime);
    }
  });
});
observer.observe({ type: "element", buffered: true });