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 with JavaScript enabled. Enable JavaScript to view data.