PerformanceElementTiming

Beschreibung

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

Die API untersttzt Timing-Informationen fr die folgenden Elemente:

• <img> Elemente,
• <image> Elemente innerhalb eines <svg>,
• poster Bilder von <video> Elementen,
• Elemente, die eine inhaltliche background-image Eigenschaft mit einem URL-Wert fr eine Ressource haben, die tatschlich verfgbar ist, und
• Gruppen von Textknoten, wie beispielsweise ein <p>.

Der Autor kennzeichnet ein Element zur Beobachtung, indem er das elementtiming Attribut auf das Element setzt.

PerformanceElementTiming erbt von PerformanceEntry.

Instanz-Eigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

PerformanceElementTiming.element Schreibgeschtzt

Ein Element, das das Element reprsentiert, ber das wir Informationen zurckgeben.

PerformanceElementTiming.id Schreibgeschtzt

Ein String, der die id des Elements ist.

PerformanceElementTiming.identifier Schreibgeschtzt

Ein String, der den Wert des elementtiming Attributs auf dem Element darstellt.

PerformanceElementTiming.intersectionRect Schreibgeschtzt

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

PerformanceElementTiming.loadTime Schreibgeschtzt

Ein DOMHighResTimeStamp mit der Ladezeit des Elements.

PerformanceElementTiming.naturalHeight Schreibgeschtzt

Ein vorzeichenloser 32-Bit-Integer (unsigned long), der die intrinsische Hhe des Bildes ist, wenn dies auf ein Bild angewendet wird, 0 fr Text.

PerformanceElementTiming.naturalWidth Schreibgeschtzt

Ein vorzeichenloser 32-Bit-Integer (unsigned long), der die intrinsische Breite des Bildes ist, wenn dies auf ein Bild angewendet wird, 0 fr Text.

PerformanceElementTiming.paintTime

Gibt den timestamp zurck, als die Rendering-Phase endete und die Mal-Phase begann.

PerformanceElementTiming.presentationTime

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

PerformanceElementTiming.renderTime Schreibgeschtzt

Ein DOMHighResTimeStamp mit der Rendering-Zeit des Elements.

PerformanceElementTiming.url Schreibgeschtzt

Ein String, der die ursprngliche URL der Ressourcenanfrage fr Bilder ist, 0 fr Text.

Es erweitert auch die folgenden PerformanceEntry Eigenschaften, qualifiziert und beschrnkt sie wie beschrieben:

PerformanceEntry.duration Schreibgeschtzt

Gibt immer 0 zurck, da duration auf dieses Interface nicht zutrifft.

PerformanceEntry.entryType Schreibgeschtzt

Gibt immer "element" zurck.

PerformanceEntry.name Schreibgeschtzt

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

PerformanceEntry.startTime Schreibgeschtzt

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

Instanz-Methoden

PerformanceElementTiming.toJSON()

Gibt eine JSON-Darstellung des PerformanceElementTiming Objekts zurck.

Beispiele

Beobachtung der Rendering-Zeit von spezifischen Elementen

In diesem Beispiel werden zwei Elemente beobachtet, indem das elementtiming Attribut hinzugefgt wird. Ein PerformanceObserver wird registriert, um alle Leistungseintrge des Typs "element" zu erhalten, und das buffered Flag wird verwendet, um auf Daten vor der Erstellung des Beobachters zuzugreifen.

<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 Eintrge werden in die Konsole ausgegeben. Der erste enthlt Details zum Bild, der zweite Details zum Textknoten.

Beobachtung separater Mal- und Prsentationszeiten

Die Eigenschaften paintTime und presentationTime ermglichen es Ihnen, spezifische Timing-Werte fr den Beginn der Malphase und das Zeichnen des Elements auf dem Bildschirm abzurufen. Die paintTime ist weitgehend interoperabel, whrend die presentationTime von der Implementierung abhngt.

Dieses Beispiel nutzt einen PerformanceObserver, um alle Leistungseintrge des Typs "element" zu beobachten (denken Sie daran, dass Elemente elementtiming Attribute haben mssen, um beobachtet zu werden). Wir berprfen die Untersttzung fr paintTime und presentationTime und rufen diese Werte ab, wenn sie verfgbar sind. In nicht untersttzenden Browsern ruft der Code die renderTime oder loadTime ab, je nach dem, was untersttzt 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 });

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• elementtiming HTML-Attribut