PerformanceElementTiming

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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 Rendertiming-Informationen für Bild- und Textknotenelemente, 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, 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 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 erweitert die folgenden PerformanceEntry-Eigenschaften für Event-Timing-Performance-Entry-Typen, indem sie wie folgt qualifiziert werden:

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.

Dieses Interface unterstützt auch die folgenden Eigenschaften:

PerformanceElementTiming.element Schreibgeschützt Experimentell: Ein Element, das das Element darstellt, ü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 am Element darstellt.
PerformanceElementTiming.intersectionRect Schreibgeschützt Experimentell: Ein DOMRectReadOnly, der das Rechteck des Elements innerhalb des Ansichtsfensters darstellt.
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 darstellt, 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 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 anfängliche URL der Ressourcenanforderung für Bilder ist, 0 für Text.

Instanz-Methoden

PerformanceElementTiming.toJSON() Experimentell: Gibt eine JSON-Repräsentation 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 genutzt, um auf Daten vor der Erstellung 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 in die Konsole ausgegeben. Der erste enthält Details des Bildes, der zweite Details des Textknotens.