PerformanceEventTiming
L'interface PerformanceEventTiming
des événements de l'Event Timing API
fournit des informations de chronométrage pour les types d'événements énumérés ci-dessous.
auxclick
beforeinput
click
compositionend
compositionstart
compositionupdate
contextmenu
dblclick
dragend
dragenter
dragleave
dragover
dragstart
drop
input
keydown
(en-US)keypress
keyup
(en-US)mousedown
mouseenter
mouseleave
mouseout
mouseover
mouseup
pointerover
(en-US)pointerenter
(en-US)pointerdown
(en-US)pointerup
(en-US)pointercancel
(en-US)pointerout
(en-US)pointerleave
(en-US)gotpointercapture
(en-US)lostpointercapture
(en-US)touchstart
(en-US)touchend
touchcancel
(en-US)
Propriétés
PerformanceEventTiming.processingStart
(en-US) lecture seule Expérimental-
Retourne un
DOMHighResTimeStamp
représentant l'heure à laquelle la diffusion des événements a commencé. PerformanceEventTiming.processingEnd
(en-US) lecture seule Expérimental-
Retourne un
DOMHighResTimeStamp
représentant l'heure à laquelle la diffusion de l'événement s'est terminée. PerformanceEventTiming.cancelable
(en-US) lecture seule Expérimental-
Retourne un
Boolean
(en-US) représentant l'attribut annulable de l'événement associé. PerformanceEventTiming.target
(en-US) lecture seule Non-standard-
Retourne un
Node
représentant la dernière cible de l'événement associé, si elle n'est pas supprimée.
Méthodes
PerformanceEventTiming.toJSON()
Expérimental-
Convertit l'objet
PerformanceEventTiming
en JSON.
Exemples
L'exemple suivant montre comment utiliser l'API pour tous les événements :
js
const observer = new PerformanceObserver(function (list) {
const perfEntries = list.getEntries().forEach((entry) => {
// Durée totale
const inputDuration = entry.duration;
// Retard d'entrée (avant l'événement de traitement)
const inputDelay = entry.processingStart - entry.startTime;
// Temps de traitement d'un événement synchrone (entre le début et la fin de la diffusion).
const inputSyncProcessingTime = entry.processingEnd - entry.processingStart;
});
});
// Enregistre un observateur pour l'événement.
observer.observe({ entryTypes: ["event"] });
Nous pouvons également interroger directement le premier délai d'entrée. Le premier délai d'entrée ou « FID : First input delay », mesure le temps entre le moment où un utilisateur interagit pour la première fois avec une page (c'est-à-dire lorsqu'il clique sur un lien ou sur un bouton) et le moment où le navigateur est effectivement en mesure de commencer à traiter les gestionnaires d'événements en réponse à cette interaction.
js
// Pour savoir si (et quand) la page a été masquée pour la première fois, voir :
// https://github.com/w3c/page-visibility/issues/29
// NOTE : idéalement, cette vérification devrait être effectuée dans le <head> du document
// pour éviter les cas où l'état de visibilité change avant l'exécution de ce code.
let firstHiddenTime = document.visibilityState === "hidden" ? 0 : Infinity;
document.addEventListener(
"visibilitychange",
(event) => {
firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
},
{ once: true },
);
// Envoie les données transmises à un point de terminaison analytique. Ce code
// utilise `/analytics` ; vous pouvez le remplacer par votre propre URL.
function sendToAnalytics(data) {
const body = JSON.stringify(data);
// Utilise `navigator.sendBeacon()` si disponible, en revenant à `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon("/analytics", body)) ||
fetch("/analytics", { body, method: "POST", keepalive: true });
}
// Utilise un try/catch au lieu de la fonction de détection de la prise en charge de `first-input`
// car certains navigateurs lancent des requêtes lorsqu'ils utilisent la nouvelle option `type`.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
function onFirstInputEntry(entry) {
// Ne rapporte le FID que si la page n'était pas cachée avant que
// l'entrée soit envoyée. Cela se produit généralement lorsqu'une
// page est chargée dans un onglet en arrière-plan.
if (entry.startTime < firstHiddenTime) {
const fid = entry.processingStart - entry.startTime;
// Rapporte la valeur du FID à un terminal d'analyse.
sendToAnalytics({ fid });
}
}
// Crée un PerformanceObserver qui appelle `onFirstInputEntry` pour chaque entrée.
const po = new PerformanceObserver((entryList) => {
entryList.getEntries().forEach(onFirstInputEntry);
});
// Observe les entrées de type `first-input`, y compris les entrées en mémoire tampon,
// c'est-à-dire les entrées qui ont eu lieu avant d'appeler `observe()` ci-dessous.
po.observe({
type: "first-input",
buffered: true,
});
} catch (e) {
// Ne fait rien si le navigateur ne prend pas en charge cette API.
}
Spécifications
Specification |
---|
Event Timing API # sec-performance-event-timing |
Compatibilité des navigateurs
BCD tables only load in the browser