PerformanceElementTiming
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
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.elementLecture seule Expérimental Non standard-
Un
Elementreprésentant l'élément pour lequel nous retournons des informations. PerformanceElementTiming.idLecture seule Expérimental Non standard-
Un
DOMStringqui est l'identifiant (attributid) de l'élément. PerformanceElementTiming.identifierLecture seule Expérimental Non standard-
Une
DOMStringqui est la valeur de l'attributelementtimingde l'élément. PerformanceElementTiming.intersectionRectLecture seule Expérimental Non standard-
Un
DOMRectReadOnlyqui est le rectangle de l'élément dans la fenêtre d'affichage. PerformanceElementTiming.loadTimeLecture seule Expérimental Non standard-
Un
DOMHighResTimeStampavec l'heure de chargement de l'élément. PerformanceElementTiming.naturalHeightLecture 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.naturalWidthLecture 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.renderTimeLecture seule Expérimental Non standard-
Un
DOMHighResTimeStampavec le renderTime de l'élément. PerformanceElementTiming.urlLecture seule Expérimental Non standard-
Une
DOMStringqui 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
Chargement…