PerformanceEventTiming

Limited availability

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

Propriétés

PerformanceEventTiming.processingStart lecture seule Expérimental

Retourne un DOMHighResTimeStamp représentant l'heure à laquelle la diffusion des événements a commencé.

PerformanceEventTiming.processingEnd lecture seule Expérimental

Retourne un DOMHighResTimeStamp représentant l'heure à laquelle la diffusion de l'événement s'est terminée.

PerformanceEventTiming.cancelable lecture seule Expérimental

Retourne un Boolean représentant l'attribut annulable de l'événement associé.

PerformanceEventTiming.target 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

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
PerformanceEventTiming
cancelable
interactionId
Experimental
processingEnd
processingStart
target
toJSON

Legend

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

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.