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 Schreibgeschützt Experimentell

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

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 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 Schreibgeschützt Experimentell

Ein Element, das das Element darstellt, für 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 des Elements darstellt.

PerformanceElementTiming.intersectionRect Schreibgeschützt Experimentell

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

PerformanceElementTiming.loadTime Schreibgeschützt Experimentell

Ein DOMHighResTimeStamp mit der Ladezeit des Elements.

PerformanceElementTiming.naturalHeight Schreibgeschützt 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 Schreibgeschützt 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 Schreibgeschützt Experimentell

Ein DOMHighResTimeStamp mit der Renderzeit des Elements.

PerformanceElementTiming.url Schreibgeschützt 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