PerformanceElementTiming

Beschreibung

Die Element Timing API soll Webentwicklern und Analysetools ermglichen, die Rendering-Zeitpunkte wichtiger Elemente auf einer Seite zu messen.

Die API untersttzt Zeitinformationen fr folgende Elemente:

• <img>-Elemente,
• <image>-Elemente innerhalb eines <svg>,
• Posterbilder von <video>-Elementen,
• Elemente mit einer inhaltsrelevanten background-image-Eigenschaft, deren URL-Wert auf eine tatschlich verfgbare Ressource verweist, und
• Gruppen von Textknoten, etwa ein <p>.

Zur Beobachtung kennzeichnen Sie ein Element, indem Sie ihm das Attribut elementtiming hinzufgen.

PerformanceElementTiming erbt von PerformanceEntry.

Instanzeigenschaften

Diese Schnittstelle definiert direkt die folgenden Eigenschaften:

PerformanceElementTiming.element Schreibgeschtzt

Ein Element, das das Element darstellt, ber das Informationen zurckgegeben werden.

PerformanceElementTiming.id Schreibgeschtzt

Eine Zeichenfolge mit der id des Elements.

PerformanceElementTiming.identifier Schreibgeschtzt

Eine Zeichenfolge mit dem Wert des Attributs elementtiming des Elements.

PerformanceElementTiming.intersectionRect Schreibgeschtzt

Ein DOMRectReadOnly, das das Rechteck des Elements innerhalb des Viewports beschreibt.

PerformanceElementTiming.loadTime Schreibgeschtzt

Ein DOMHighResTimeStamp mit dem loadTime-Wert des Elements.

PerformanceElementTiming.naturalHeight Schreibgeschtzt

Eine vorzeichenlose 32-Bit-Ganzzahl (unsigned long), die bei einem Bild dessen intrinsische Hhe angibt; bei Text ist der Wert 0.

PerformanceElementTiming.naturalWidth Schreibgeschtzt

Eine vorzeichenlose 32-Bit-Ganzzahl (unsigned long), die bei einem Bild dessen intrinsische Breite angibt; bei Text ist der Wert 0.

PerformanceElementTiming.paintTime

Gibt den timestamp zurck, zu dem die Rendering-Phase endete und die Paint-Phase begann.

PerformanceElementTiming.presentationTime

Gibt den timestamp zurck, zu dem das Element tatschlich auf dem Bildschirm gezeichnet wurde.

PerformanceElementTiming.renderTime Schreibgeschtzt

Ein DOMHighResTimeStamp mit dem renderTime-Wert des Elements.

PerformanceElementTiming.url Schreibgeschtzt

Eine Zeichenfolge mit der ursprnglichen URL der Ressourcenanforderung fr Bilder; bei Text ist der Wert 0.

Die Schnittstelle erweitert auerdem die folgenden Eigenschaften von PerformanceEntry und konkretisiert beziehungsweise beschrnkt sie wie beschrieben:

PerformanceEntry.duration Schreibgeschtzt

Gibt immer 0 zurck, da duration fr diese Schnittstelle nicht anwendbar ist.

PerformanceEntry.entryType Schreibgeschtzt

Gibt immer "element" zurck.

PerformanceEntry.name Schreibgeschtzt

Gibt fr Bilder "image-paint" und fr Text "text-paint" zurck.

PerformanceEntry.startTime Schreibgeschtzt

Gibt den Wert von renderTime dieses Eintrags zurck, sofern er nicht 0 ist; andernfalls den Wert von loadTime dieses Eintrags.

Instanzmethoden

PerformanceElementTiming.toJSON()

Gibt ein als JSON serialisierbares einfaches Objekt zurck, das das PerformanceElementTiming-Objekt darstellt. Die Methode wird von JSON.stringify() automatisch aufgerufen.

Beispiele

Rendering-Zeit bestimmter Elemente beobachten

In diesem Beispiel werden zwei Elemente beobachtet, indem ihnen das Attribut elementtiming hinzugefgt wird. Ein PerformanceObserver wird registriert, um alle Performance-Eintrge des Typs "element" zu erhalten. Das Flag buffered ermglicht den Zugriff auf Daten aus der Zeit vor der Erstellung des Observers.

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

Auf der Konsole werden zwei Eintrge ausgegeben: Der erste enthlt Details zum Bild, der zweite Details zum Textknoten.

Zeitpunkte fr Paint und Darstellung getrennt beobachten

Mit den Eigenschaften paintTime und presentationTime knnen Sie die Zeitpunkte fr den Beginn der Paint-Phase und fr die Darstellung des Elements auf dem Bildschirm getrennt abrufen. paintTime ist weitgehend interoperabel, whrend presentationTime von der Implementierung abhngt.

In diesem Beispiel beobachtet ein PerformanceObserver alle Performance-Eintrge des Typs "element". Beachten Sie, dass fr beobachtete Elemente das Attribut elementtiming gesetzt sein muss. Der Code prft, ob paintTime und presentationTime untersttzt werden, und ruft die Werte gegebenenfalls ab. In Browsern, die diese Eigenschaften nicht untersttzen, ruft er je nach Untersttzung renderTime oder loadTime ab.

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

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• HTML-Attribut elementtiming