PerformanceElementTiming

Beschreibung

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

Die API unterstützt Zeitinformationen für 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 tatsächlich verfügbare Ressource verweist, und
• Gruppen von Textknoten, etwa ein <p>.

Zur Beobachtung kennzeichnen Sie ein Element, indem Sie ihm das Attribut elementtiming hinzufügen.

PerformanceElementTiming erbt von PerformanceEntry.

Instanzeigenschaften

Diese Schnittstelle definiert direkt die folgenden Eigenschaften:

PerformanceElementTiming.element Schreibgeschützt

Ein Element, das das Element darstellt, über das Informationen zurückgegeben werden.

PerformanceElementTiming.id Schreibgeschützt

Eine Zeichenfolge mit der id des Elements.

PerformanceElementTiming.identifier Schreibgeschützt

Eine Zeichenfolge mit dem Wert des Attributs elementtiming des Elements.

PerformanceElementTiming.intersectionRect Schreibgeschützt

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

PerformanceElementTiming.loadTime Schreibgeschützt

Ein DOMHighResTimeStamp mit dem loadTime-Wert des Elements.

PerformanceElementTiming.naturalHeight Schreibgeschützt

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

PerformanceElementTiming.naturalWidth Schreibgeschützt

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 zurück, zu dem die Rendering-Phase endete und die Paint-Phase begann.

PerformanceElementTiming.presentationTime

Gibt den timestamp zurück, zu dem das Element tatsächlich auf dem Bildschirm gezeichnet wurde.

PerformanceElementTiming.renderTime Schreibgeschützt

Ein DOMHighResTimeStamp mit dem renderTime-Wert des Elements.

PerformanceElementTiming.url Schreibgeschützt

Eine Zeichenfolge mit der ursprünglichen URL der Ressourcenanforderung für Bilder; bei Text ist der Wert 0.

Die Schnittstelle erweitert außerdem die folgenden Eigenschaften von PerformanceEntry und konkretisiert beziehungsweise beschränkt sie wie beschrieben:

PerformanceEntry.duration Schreibgeschützt

Gibt immer 0 zurück, da duration für diese Schnittstelle nicht anwendbar ist.

PerformanceEntry.entryType Schreibgeschützt

Gibt immer "element" zurück.

PerformanceEntry.name Schreibgeschützt

Gibt für Bilder "image-paint" und für Text "text-paint" zurück.

PerformanceEntry.startTime Schreibgeschützt

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

Instanzmethoden

PerformanceElementTiming.toJSON()

Gibt ein als JSON serialisierbares einfaches Objekt zurück, 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 hinzugefügt wird. Ein PerformanceObserver wird registriert, um alle Performance-Einträge des Typs "element" zu erhalten. Das Flag buffered ermöglicht 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 Einträge ausgegeben: Der erste enthält Details zum Bild, der zweite Details zum Textknoten.

Zeitpunkte für Paint und Darstellung getrennt beobachten

Mit den Eigenschaften paintTime und presentationTime können Sie die Zeitpunkte für den Beginn der Paint-Phase und für die Darstellung des Elements auf dem Bildschirm getrennt abrufen. paintTime ist weitgehend interoperabel, während presentationTime von der Implementierung abhängt.

In diesem Beispiel beobachtet ein PerformanceObserver alle Performance-Einträge des Typs "element". Beachten Sie, dass für beobachtete Elemente das Attribut elementtiming gesetzt sein muss. Der Code prüft, ob paintTime und presentationTime unterstützt werden, und ruft die Werte gegebenenfalls ab. In Browsern, die diese Eigenschaften nicht unterstützen, ruft er je nach Unterstützung 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-Kompatibilität

Siehe auch

• HTML-Attribut elementtiming