PerformanceElementTiming

Das Ziel der Element Timing API ist es, Webentwicklern oder Analysetools die Möglichkeit zu geben, die Rendering-Zeitstempel kritischer Elemente 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 inhaltsvolle background-image-Eigenschaft mit einem URL-Wert für eine tatsächlich verfügbare Ressource haben, und
• Gruppen von Textknoten, wie z.B. ein <p>.

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

PerformanceElementTiming erbt von PerformanceEntry.

Diese Schnittstelle erweitert die folgenden PerformanceEntry-Eigenschaften für Event-Timing-Performance-Eintragstypen, indem sie wie folgt qualifiziert werden:

PerformanceEntry.duration Nur lesbar Experimentell

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

PerformanceEntry.entryType Nur lesbar Experimentell

Gibt immer "element" zurück.

PerformanceEntry.name Nur lesbar Experimentell

Gibt "image-paint" für Bilder und "text-paint" für Text zurück.

PerformanceEntry.startTime Nur lesbar Experimentell

Gibt den Wert der renderTime dieses Eintrags zurück, wenn dieser nicht 0 ist, ansonsten den Wert der loadTime dieses Eintrags.

Diese Schnittstelle unterstützt auch die folgenden Eigenschaften:

PerformanceElementTiming.element Nur lesbar Experimentell

Ein Element, das das Element darstellt, für das Informationen zurückgegeben werden.

PerformanceElementTiming.id Nur lesbar Experimentell

Ein String, der die id des Elements ist.

PerformanceElementTiming.identifier Nur lesbar Experimentell

Ein String, der den Wert des elementtiming-Attributs des Elements darstellt.

PerformanceElementTiming.intersectionRect Nur lesbar Experimentell

Ein DOMRectReadOnly, das das Rechteck des Elements im Ansichtsfenster darstellt.

PerformanceElementTiming.loadTime Nur lesbar Experimentell

Ein DOMHighResTimeStamp mit der Ladezeit des Elements.

PerformanceElementTiming.naturalHeight Nur lesbar Experimentell

Ein vorzeichenloser 32-Bit-Ganzzahlwert (unsigned long), der die intrinsische Höhe des Bildes darstellt, wenn dies auf ein Bild angewendet wird, 0 für Text.

PerformanceElementTiming.naturalWidth Nur lesbar Experimentell

Ein vorzeichenloser 32-Bit-Ganzzahlwert (unsigned long), der die intrinsische Breite des Bildes darstellt, wenn dies auf ein Bild angewendet wird, 0 für Text.

PerformanceElementTiming.renderTime Nur lesbar Experimentell

Ein DOMHighResTimeStamp mit der Renderzeit des Elements.

PerformanceElementTiming.url Nur lesbar Experimentell

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

PerformanceElementTiming.toJSON() Experimentell

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

In diesem Beispiel werden zwei Elemente beobachtet, indem das elementtiming-Attribut hinzugefügt wird. Ein PerformanceObserver wird registriert, um alle Performance-Einträge des Typs "element" zu erhalten, und das buffered-Flag wird verwendet, um auf Daten zuzugreifen, die vor der Beobachtererstellung vorhanden sind.

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

• elementtiming HTML-Attribut