La propriété en lecture seule renderTime de l'interface PerformanceElementTiming renvoie le temps écoulé pour le rendu de l'élément associé.
var renderTime = PerformanceElementTiming.renderTime;
Un objet DOMHighResTimeStamp avec le temps de rendu de l'élément.
Pour les images, il s'agira de l'horodatage du rendu de l'image. Ceci est défini comme le moment du rendu suivant le chargement complet de l'image. Si la vérification de l'autorisation de temporisation échoue (comme défini par l'en-tête Timing-allow-origin), ceci retournera 0.
Pour les nœuds de texte, il s'agira de l'horodatage du rendu du texte. Ceci est défini comme le moment où l'élément est affiché à l'écran.
Dans cet exemple, appeler entry.renderTime renvoie le temps de rendu de l'élément image.
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
const observer = new PerformanceObserver((list) => {
let entries = list.getEntries().forEach(function (entry) {
if (entry.identifier === "big-image") {
console.log(entry.renderTime);
}
});
});
observer.observe({ entryTypes: ["element"] });
Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.
| Spécification | Statut | Commentaire |
|---|---|---|
| {{SpecName('Element Timing API','#dom-performanceelementtiming-rendertime','PerformanceElementTiming.renderTime')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
{{Compat("api.PerformanceElementTiming.renderTime")}}