PerformanceElementTiming

Limited availability

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

Experimentell:Dies ist eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

DasPerformanceElementTiming Interface enthält Rendertiming-Informationen für Bild- und Textknotenelemente, die der Entwickler mit einemelementtiming 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 inhaltsvollebackground-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 daselementtiming-Attribut am Element hinzufügt.

PerformanceElementTiming erbt vonPerformanceEntry.

Instanz-Eigenschaften

Dieses Interface erweitert die folgendenPerformanceEntry-Eigenschaften für Event-Timing-Performance-Entry-Typen, indem sie wie folgt qualifiziert werden:

PerformanceEntry.durationSchreibgeschütztExperimentell: Gibt immer0 zurück, daduration auf dieses Interface nicht zutrifft.
PerformanceEntry.entryTypeSchreibgeschütztExperimentell: Gibt immer"element" zurück.
PerformanceEntry.nameSchreibgeschütztExperimentell: Gibt"image-paint" für Bilder und"text-paint" für Text zurück.
PerformanceEntry.startTimeSchreibgeschütztExperimentell: Gibt den Wert von renderTime dieses Eintrags zurück, wenn er nicht0 ist, andernfalls den Wert vonloadTime dieses Eintrags.

Dieses Interface unterstützt auch die folgenden Eigenschaften:

PerformanceElementTiming.elementSchreibgeschütztExperimentell: Ein Element, das das Element darstellt, über das wir Informationen zurückgeben.
PerformanceElementTiming.idSchreibgeschütztExperimentell: Ein String, der die id des Elements ist.
PerformanceElementTiming.identifierSchreibgeschütztExperimentell: Ein String, der den Wert des elementtiming Attributs am Element darstellt.
PerformanceElementTiming.intersectionRectSchreibgeschütztExperimentell: Ein DOMRectReadOnly, der das Rechteck des Elements innerhalb des Ansichtsfensters darstellt.
PerformanceElementTiming.loadTimeSchreibgeschütztExperimentell: Ein DOMHighResTimeStamp mit der Ladezeit des Elements.
PerformanceElementTiming.naturalHeightSchreibgeschütztExperimentell: 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.naturalWidthSchreibgeschütztExperimentell: 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.renderTimeSchreibgeschütztExperimentell: Ein DOMHighResTimeStamp mit der Renderzeit des Elements.
PerformanceElementTiming.urlSchreibgeschütztExperimentell: 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 desPerformanceElementTiming Objekts zurück.

In diesem Beispiel werden zwei Elemente beobachtet, indem daselementtiming Attribut hinzugefügt wird. EinPerformanceObserver wird registriert, um alle Performance-Einträge des Typs"element" zu erhalten, und dasbuffered Flag wird genutzt, um auf Daten vor der Erstellung des Observers zuzugreifen.

html

<img src="image.jpg" elementtiming="big-image" /><p elementtiming="text">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.