PerformanceElementTiming

Beschreibung

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

Die API stellt Zeitinformationen für folgende Elemente bereit:

• <img>-Elemente,
• <image>-Elemente innerhalb eines <svg>,
• Posterbilder von <video>-Elementen,
• Elemente, deren background-image-Eigenschaft ein Bild mit einem URL-Wert für eine tatsächlich verfügbare Ressource angibt, und
• Gruppen von Textknoten, beispielsweise ein <p>.

Um ein Element für die Beobachtung zu kennzeichnen, fügt der Autor ihm das Attribut elementtiming hinzu.

PerformanceElementTiming erbt von PerformanceEntry.

Instanzeigenschaften

Diese Schnittstelle definiert die folgenden Eigenschaften direkt:

PerformanceElementTiming.element Schreibgeschützt

Ein Element, das das Element repräsentiert, über das Informationen zurückgegeben werden.

PerformanceElementTiming.id Schreibgeschützt

Eine Zeichenfolge mit dem Wert des Attributs 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 der loadTime 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 Schreibgeschützt

Gibt den Zeitstempel zurück, zu dem die Rendering-Phase endete und die Paint-Phase begann.

PerformanceElementTiming.presentationTime Schreibgeschützt

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

PerformanceElementTiming.renderTime Schreibgeschützt

Ein DOMHighResTimeStamp mit der renderTime 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 legt sie wie beschrieben genauer fest:

PerformanceEntry.duration Schreibgeschützt

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

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 repräsentiert. Die Methode wird von JSON.stringify() automatisch aufgerufen.

Beispiele

Rendering-Zeit bestimmter Elemente beobachten

In diesem Beispiel werden zwei Elemente beobachtet, denen das Attribut elementtiming hinzugefügt wurde. Ein PerformanceObserver wird registriert, um alle Performance-Einträge vom Typ "element" zu erhalten. Mit dem Flag buffered wird auch auf Daten zugegriffen, die vor der Erstellung des Observers erfasst wurden.

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

In 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 ermitteln, wann die Paint-Phase begann und wann das Element auf dem Bildschirm gezeichnet wurde. paintTime ist weitgehend browserübergreifend verfügbar, während presentationTime von der Implementierung abhängt.

Dieses Beispiel verwendet einen PerformanceObserver, um alle Performance-Einträge vom Typ "element" zu beobachten. Beachten Sie, dass für die beobachteten 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 ohne entsprechende Unterstützung ruft er je nach Verfügbarkeit 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