PerformanceElementTiming

Limited availability

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

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Non standard: Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

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 Lecture seule Expérimental Non standard

Un Element représentant l'élément pour lequel nous retournons des informations.

PerformanceElementTiming.id Lecture seule Expérimental Non standard

Un DOMString qui est l'identifiant (attribut id) de l'élément.

PerformanceElementTiming.identifier Lecture seule Expérimental Non standard

Une DOMString qui est la valeur de l'attribut elementtiming de l'élément.

PerformanceElementTiming.intersectionRect Lecture seule Expérimental Non standard

Un DOMRectReadOnly qui est le rectangle de l'élément dans la fenêtre d'affichage.

PerformanceElementTiming.loadTime Lecture seule Expérimental Non standard

Un DOMHighResTimeStamp avec l'heure de chargement de l'élément.

PerformanceElementTiming.naturalHeight Lecture seule Expérimental Non standard

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 Lecture seule Expérimental Non standard

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 Lecture seule Expérimental Non standard

Un DOMHighResTimeStamp avec le renderTime de l'élément.

PerformanceElementTiming.url Lecture seule Expérimental Non standard

Une DOMString qui est l'URL initiale de la demande de ressources pour les images, 0 pour le texte.

Méthodes

PerformanceElementTiming.toJSON() Expérimental Non standard

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.

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

Spécifications

Specification
Element Timing API
# sec-performance-element-timing

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PerformanceElementTiming
Experimental
element
Experimental
id
Experimental
identifier
Experimental
intersectionRect
Experimental
loadTime
Experimental
naturalHeight
Experimental
naturalWidth
Experimental
renderTime
Experimental
Cross-origin
Experimental
toJSON
Experimental
url
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.