PerformanceElementTiming

Instanzeigenschaften

Diese Schnittstelle definiert direkt die folgenden Eigenschaften:

PerformanceElementTiming.element Schreibgeschützt

Ein Element, das das Element repräsentiert, ü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 elementtiming-Attributs 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 Ladezeit 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 timestamp zurück, zu dem die Rendering-Phase endete und die Paint-Phase begann.

PerformanceElementTiming.presentationTime Schreibgeschützt

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

PerformanceElementTiming.renderTime Schreibgeschützt

Ein DOMHighResTimeStamp mit der Rendering-Zeit des Elements.

PerformanceElementTiming.url Schreibgeschützt

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

Sie erweitert außerdem die folgenden Eigenschaften von PerformanceEntry und präzisiert beziehungsweise beschränkt sie wie beschrieben:

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 einfaches, JSON-serialisierbares Objekt zurück, das das PerformanceElementTiming-Objekt repräsentiert. Die Methode wird automatisch von JSON.stringify() aufgerufen.

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 die folgenden Elemente:

• <img>-Elemente,
• <image>-Elemente innerhalb eines <svg>,
• Poster-Bilder von <video>-Elementen,
• Elemente mit einer inhaltstragenden background-image-Eigenschaft, deren URL-Wert auf eine tatsächlich verfügbare Ressource verweist, und
• Gruppen von Textknoten, etwa ein <p>.

Um ein Element zur Beobachtung zu kennzeichnen, fügt der Autor dem Element das Attribut elementtiming hinzu.

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 vom Typ "element" zu erhalten. Das Flag buffered ermöglicht den Zugriff auf Daten, 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 });

Zwei Einträge werden auf der Konsole ausgegeben. Der erste enthält Details zum Bild, der zweite Details zum Textknoten.

Getrennte Paint- und Darstellungszeitpunkte beobachten

Mit den Eigenschaften paintTime und presentationTime können Sie die Zeitpunkte ermitteln, zu denen die Paint-Phase beginnt beziehungsweise das Element auf dem Bildschirm gezeichnet wird. paintTime ist weitgehend browserübergreifend nutzbar, während presentationTime von der jeweiligen Implementierung abhängt.

In diesem Beispiel beobachtet ein PerformanceObserver alle Performance-Einträge vom Typ "element". Beachten Sie, dass Elemente nur beobachtet werden können, wenn für sie das Attribut elementtiming gesetzt ist. Wir prüfen, ob paintTime und presentationTime unterstützt werden, und lesen ihre Werte aus, falls sie verfügbar sind. In Browsern ohne entsprechende Unterstützung liest der Code je nach Verfügbarkeit renderTime oder loadTime aus.

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