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 (attributid
) de l'élément. PerformanceElementTiming.identifier
Lecture seule Expérimental Non-standard-
Une
DOMString
qui est la valeur de l'attributelementtiming
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.
<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
Specification |
---|
Element Timing API # sec-performance-element-timing |
Compatibilité des navigateurs
BCD tables only load in the browser