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.

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 :

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.

// 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