PerformanceElementTiming

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das PerformanceElementTiming-Interface enthält Render-Zeitinformationen für Bild- und Textknoten-Elemente, die der Entwickler mit einem elementtiming-Attribut zur Beobachtung versehen hat.

Beschreibung

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

Die API unterstützt Zeitinformationen für folgende Elemente:

<img>-Elemente,
<image>-Elemente innerhalb eines <svg>,
poster-Bilder von <video>-Elementen,
Elemente, die eine inhaltsreiche background-image-Eigenschaft mit einem URL-Wert für eine tatsächlich verfügbare Ressource haben, und
Gruppen von Textknoten, wie ein <p>.

Der Autor markiert ein Element zur Beobachtung, indem er das elementtiming-Attribut am Element hinzufügt.

PerformanceElementTiming erbt von PerformanceEntry.

Instanz-Eigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

PerformanceElementTiming.element Schreibgeschützt Experimentell: Ein Element, das das Element repräsentiert, über das Informationen zurückgegeben werden.
PerformanceElementTiming.id Schreibgeschützt Experimentell: Ein String, der die id des Elements ist.
PerformanceElementTiming.identifier Schreibgeschützt Experimentell: Ein String, der den Wert des elementtiming-Attributs am Element darstellt.
PerformanceElementTiming.intersectionRect Schreibgeschützt Experimentell: Ein DOMRectReadOnly, das das Rechteck des Elements im Ansichtsbereich ist.
PerformanceElementTiming.loadTime Schreibgeschützt Experimentell: Ein DOMHighResTimeStamp mit der Ladezeit des Elements.
PerformanceElementTiming.naturalHeight Schreibgeschützt Experimentell: Ein vorzeichenloser 32-Bit-Integer (unsigned long), der die intrinsische Höhe des Bildes ist, wenn es auf ein Bild angewendet wird, 0 für Text.
PerformanceElementTiming.naturalWidth Schreibgeschützt Experimentell: Ein vorzeichenloser 32-Bit-Integer (unsigned long), der die intrinsische Breite des Bildes ist, wenn es auf ein Bild angewendet wird, 0 für Text.
PerformanceElementTiming.paintTime: Gibt den timestamp zurück, als die Rendering-Phase endete und die Malphase begann.
PerformanceElementTiming.presentationTime: Gibt den timestamp zurück, als das Element tatsächlich auf dem Bildschirm gezeichnet wurde.
PerformanceElementTiming.renderTime Schreibgeschützt Experimentell: Ein DOMHighResTimeStamp mit der Renderzeit des Elements.
PerformanceElementTiming.url Schreibgeschützt Experimentell: Ein String, der die initiale URL der Ressourcenanfrage für Bilder ist, 0 für Text.

Es erweitert auch die folgenden PerformanceEntry-Eigenschaften, indem es diese qualifiziert und einschränkt, wie beschrieben:

PerformanceEntry.duration Schreibgeschützt Experimentell: Gibt immer 0 zurück, da duration auf dieses Interface nicht anwendbar ist.
PerformanceEntry.entryType Schreibgeschützt Experimentell: Gibt immer "element" zurück.
PerformanceEntry.name Schreibgeschützt Experimentell: Gibt "image-paint" für Bilder und "text-paint" für Text zurück.
PerformanceEntry.startTime Schreibgeschützt Experimentell: Gibt den Wert von renderTime dieser Eintragung zurück, wenn er nicht 0 ist, andernfalls den Wert von loadTime dieser Eintragung.

Instanz-Methoden

PerformanceElementTiming.toJSON() Experimentell: Gibt eine JSON-Darstellung des PerformanceElementTiming-Objekts zurück.

In diesem Beispiel werden zwei Elemente durch Hinzufügen des elementtiming-Attributs beobachtet. Ein PerformanceObserver wird registriert, um alle Performance-Einträge vom Typ "element" zu erhalten, und das buffered-Flag wird verwendet, um auf Daten von vor der Erzeugung des Observers zuzugreifen.

html

<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 an die Konsole ausgegeben. Der erste enthält Details zu dem Bild, der zweite Details zum Textknoten.

Beobachtung separater Mal- und Präsentationszeiten

Die Eigenschaften paintTime und presentationTime ermöglichen es Ihnen, spezifische Zeiten für den Beginn der Malphase und das Zeichnen des Elements auf dem Bildschirm zu ermitteln. Die paintTime ist weitgehend interoperabel, während die presentationTime implementierungsabhängig ist.

Dieses Beispiel verwendet einen PerformanceObserver, um alle Performance-Einträge vom Typ "element" zu beobachten (denken Sie daran, dass Elemente, um beobachtet zu werden, elementtiming-Attribute gesetzt haben müssen). Wir prüfen die Unterstützung von paintTime und presentationTime und ermitteln diese Werte, wenn sie verfügbar sind. In Browsern, die dies nicht unterstützen, ruft der Code je nach Unterstützung die 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 });