PerformanceElementTiming

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 Timing-Informationen für 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 für eine Ressource haben, die tatsächlich verfügbar 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 Schreibgeschützt Experimentell

Ein Element, das das Element repräsentiert, über das wir Informationen zurückgeben.

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 auf dem Element darstellt.

PerformanceElementTiming.intersectionRect Schreibgeschützt Experimentell

Ein DOMRectReadOnly, das das Rechteck des Elements innerhalb des Viewports 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 dies 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 dies auf ein Bild angewendet wird, 0 für Text.

PerformanceElementTiming.paintTime Experimentell

Gibt den timestamp zurück, als die Rendering-Phase endete und die Mal-Phase begann.

PerformanceElementTiming.presentationTime Experimentell

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

PerformanceElementTiming.renderTime Schreibgeschützt Experimentell

Ein DOMHighResTimeStamp mit der Rendering-Zeit des Elements.

PerformanceElementTiming.url Schreibgeschützt Experimentell

Ein String, der die ursprüngliche URL der Ressourcenanfrage für Bilder ist, 0 für Text.

Es erweitert auch die folgenden PerformanceEntry Eigenschaften, qualifiziert und beschränkt sie wie beschrieben:

PerformanceEntry.duration Schreibgeschützt Experimentell

Gibt immer 0 zurück, da duration auf dieses Interface nicht zutrifft.

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 dieses Eintrags zurück, wenn er nicht 0 ist, andernfalls den Wert von loadTime dieses Eintrags.

Instanz-Methoden

PerformanceElementTiming.toJSON() Experimentell

Gibt eine JSON-Darstellung des PerformanceElementTiming Objekts zurück.

Beispiele

Beobachtung der Rendering-Zeit von spezifischen Elementen

In diesem Beispiel werden zwei Elemente beobachtet, indem das elementtiming Attribut hinzugefügt wird. Ein PerformanceObserver wird registriert, um alle Leistungseinträge 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 Einträge werden in die Konsole ausgegeben. Der erste enthält Details zum Bild, der zweite Details zum Textknoten.

Beobachtung separater Mal- und Präsentationszeiten

Die Eigenschaften paintTime und presentationTime ermöglichen es Ihnen, spezifische Timing-Werte für den Beginn der Malphase und das Zeichnen des Elements auf dem Bildschirm abzurufen. Die paintTime ist weitgehend interoperabel, während die presentationTime von der Implementierung abhängt.

Dieses Beispiel nutzt einen PerformanceObserver, um alle Leistungseinträge des Typs "element" zu beobachten (denken Sie daran, dass Elemente elementtiming Attribute haben müssen, um beobachtet zu werden). Wir überprüfen die Unterstützung für paintTime und presentationTime und rufen diese Werte ab, wenn sie verfügbar sind. In nicht unterstützenden Browsern ruft der Code die renderTime oder loadTime ab, je nach dem, was unterstützt 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-Kompatibilität

Siehe auch

• elementtiming HTML-Attribut