--- title: PerformanceElementTiming slug: Web/API/PerformanceElementTiming tags: - API - Interface - Reference - PerformanceElementTiming translation_of: Web/API/PerformanceElementTiming ---
{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}

L'interface PerformanceElementTiming de l'API Element Timing API rapporte les informations de timing sur un élément spécifique identifié par l'auteur de la page. Par exemple, elle peut fournir des informations sur l'image principale d'un article.

Propriétés

PerformanceElementTiming.element {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
Un Element représentant l'élément pour lequel nous retournons des informations.
PerformanceElementTiming.id {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
Un DOMString qui est l'identifiant (attribut id) de l'élément.
PerformanceElementTiming.identifier {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
Une DOMString qui est la valeur de l'attribut elementtiming de l'élément.
PerformanceElementTiming.intersectionRect {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
Un DOMRectReadOnly qui est le rectangle de l'élément dans la fenêtre d'affichage.
PerformanceElementTiming.loadTime {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
Un DOMHighResTimeStamp avec l'heure de chargement de l'élément.
PerformanceElementTiming.naturalHeight {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
Un entier de 32 bits non signé (unsigned long) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
PerformanceElementTiming.naturalWidth {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
Un entier de 32 bits non signé (unsigned long) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
PerformanceElementTiming.renderTime {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
Un DOMHighResTimeStamp avec le renderTime de l'élément.
PerformanceElementTiming.url {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
Une DOMString qui est l'URL initiale de la demande de ressources pour les images, 0 pour le texte.

Méthodes

PerformanceElementTiming.toJSON() {{Experimental_Inline}} {{Non-Standard_Inline}}
Génère une description JSON de l'objet.

Exemples

Dans cet exemple, nous avons deux éléments qui sont observés. Nous utilisons l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, l'observation de l'élément PerformanceEntry.entrytype element afin d'utiliser l'interface PerformanceElementTiming.

Deux entrées seront affichées dans la console. La première contenant les détails de l'image, la seconde les détails du nœud texte.

<img src="image.jpg" elementtiming="big-image">
<p elementtiming="text" id="text-id">le texte ici</p>
const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
      console.log(entry);
  });
});
observer.observe({ entryTypes: ["element"] });

Spécifications

Spécification Statut Commentaire
{{SpecName('Element Timing API','#sec-performance-element-timing','PerformanceElementTiming')}} {{Spec2('Element Timing API')}} Définition initiale.

Compatibilité des navigateurs

{{Compat("api.PerformanceElementTiming")}}