From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- files/fr/web/api/performanceeventtiming/index.md | 185 ++++++++++------------- 1 file changed, 84 insertions(+), 101 deletions(-) (limited to 'files/fr/web/api/performanceeventtiming') diff --git a/files/fr/web/api/performanceeventtiming/index.md b/files/fr/web/api/performanceeventtiming/index.md index 117fefc656..528d72302b 100644 --- a/files/fr/web/api/performanceeventtiming/index.md +++ b/files/fr/web/api/performanceeventtiming/index.md @@ -11,75 +11,70 @@ tags: - Performance Web translation_of: Web/API/PerformanceEventTiming --- -
{{APIRef("Event Timing API")}}
- -

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 lecture seule {{ExperimentalBadge}}
-
Retourne un DOMHighResTimeStamp représentant l'heure à laquelle la diffusion des événements a commencé.
-
PerformanceEventTiming.processingEnd lecture seule {{ExperimentalBadge}}
-
Retourne un DOMHighResTimeStamp représentant l'heure à laquelle la diffusion de l'événement s'est terminée.
-
PerformanceEventTiming.cancelable lecture seule {{ExperimentalBadge}}
-
Retourne un Boolean représentant l'attribut annulable de l'événement associé.
-
PerformanceEventTiming.target lecture seule {{NonStandardBadge}}
-
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() {{ExperimentalBadge}}
-
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 => {
+{{APIRef("Event Timing API")}}
+
+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`](/fr/docs/Web/API/Element/auxclick_event)
+- [`beforeinput`](/fr/docs/Web/API/HTMLElement/beforeinput_event)
+- [`click`](/fr/docs/Web/API/Element/click_event)
+- [`compositionend`](/fr/docs/Web/API/Element/compositionend_event)
+- [`compositionstart`](/fr/docs/Web/API/Element/compositionstart_event)
+- [`compositionupdate`](/fr/docs/Web/API/Element/compositionupdate_event)
+- [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
+- [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+- [`dragend`](/fr/docs/Web/API/Document/dragend_event)
+- [`dragenter`](/fr/docs/Web/API/Document/dragenter_event)
+- [`dragleave`](/fr/docs/Web/API/Document/dragleave_event)
+- [`dragover`](/fr/docs/Web/API/Document/dragover_event)
+- [`dragstart`](/fr/docs/Web/API/Document/dragstart_event)
+- [`drop`](/fr/docs/Web/API/Document/drop_event)
+- [`input`](/fr/docs/Web/API/HTMLElement/input_event)
+- [`keydown`](/fr/docs/Web/API/Document/keydown_event)
+- [`keypress`](/fr/docs/Web/API/Document/keypress_event)
+- [`keyup`](/fr/docs/Web/API/Document/keyup_event)
+- [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+- [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+- [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
+- [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+- [`mouseover`](/fr/docs/Web/API/Element/mouseover_event)
+- [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+- [`pointerover`](/fr/docs/Web/API/Document/pointerover_event)
+- [`pointerenter`](/fr/docs/Web/API/Document/pointerenter_event)
+- [`pointerdown`](/fr/docs/Web/API/Document/pointerdown_event)
+- [`pointerup`](/fr/docs/Web/API/Document/pointerup_event)
+- [`pointercancel`](/fr/docs/Web/API/Document/pointercancel_event)
+- [`pointerout`](/fr/docs/Web/API/Document/pointerout_event)
+- [`pointerleave`](/fr/docs/Web/API/Document/pointerleave_event)
+- [`gotpointercapture`](/fr/docs/Web/API/Document/gotpointercapture_event)
+- [`lostpointercapture`](/fr/docs/Web/API/Document/lostpointercapture_event)
+- [`touchstart`](/fr/docs/Web/API/Document/touchstart_event)
+- [`touchend`](/fr/docs/Web/API/Document/touchend_event)
+- [`touchcancel`](/fr/docs/Web/API/Document/touchcancel_event)
+
+## Propriétés
+
+- [`PerformanceEventTiming.processingStart`](/fr/docs/Web/API/PerformanceEventTiming/processingStart) _lecture seule_ {{ExperimentalBadge}}
+  - : Retourne un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'heure à laquelle la diffusion des événements a commencé.
+- [`PerformanceEventTiming.processingEnd`](/fr/docs/Web/API/PerformanceEventTiming/processingEnd) _lecture seule_ {{ExperimentalBadge}}
+  - : Retourne un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'heure à laquelle la diffusion de l'événement s'est terminée.
+- [`PerformanceEventTiming.cancelable`](/fr/docs/Web/API/PerformanceEventTiming/cancelable) _lecture seule_ {{ExperimentalBadge}}
+  - : Retourne un [`Boolean`](/fr/docs/Web/API/Boolean) représentant l'attribut annulable de l'événement associé.
+- [`PerformanceEventTiming.target`](/fr/docs/Web/API/PerformanceEventTiming/target) _lecture seule_ {{NonStandardBadge}}
+  - : Retourne un [`Node`](/fr/docs/Web/API/Node) représentant la dernière cible de l'événement associé, si elle n'est pas supprimée.
+
+## Méthodes
+
+- [`PerformanceEventTiming.toJSON()`]() {{ExperimentalBadge}}
+  - : Convertit l'objet [`PerformanceEventTiming`](/fr/docs/Web/API/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)
@@ -90,16 +85,17 @@ translation_of: Web/API/PerformanceEventTiming
 });
 // 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.

+Nous pouvons également interroger directement le [premier délai d'entrée](https://web.dev/fid). 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 :
+```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
+// NOTE : idéalement, cette vérification devrait être effectuée dans le  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) => {
+document.addEventListener('visibilitychange', (event) => {
   firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
 }, {once: true});
 
@@ -108,7 +104,7 @@ document.addEventListener('visibilitychange', (event) => {
 function sendToAnalytics(data) {
   const body = JSON.stringify(data);
   // Utilise `navigator.sendBeacon()` si disponible, en revenant à `fetch()`.
-  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
       fetch('/analytics', {body, method: 'POST', keepalive: true});
 }
 
@@ -120,7 +116,7 @@ try {
     // 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) {
+    if (entry.startTime < firstHiddenTime) {
       const fid = entry.processingStart - entry.startTime;
 
       // Rapporte la valeur du FID à un terminal d'analyse.
@@ -129,7 +125,7 @@ try {
   }
 
   // Crée un PerformanceObserver qui appelle `onFirstInputEntry` pour chaque entrée.
-  const po = new PerformanceObserver((entryList) => {
+  const po = new PerformanceObserver((entryList) => {
     entryList.getEntries().forEach(onFirstInputEntry);
   });
 
@@ -142,27 +138,14 @@ try {
 } catch (e) {
   // Ne fait rien si le navigateur ne prend pas en charge cette API.
 }
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Event Timing API','#sec-performance-event-timing','PerformanceEventTiming')}}{{Spec2('Event Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceEventTiming")}}

+``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('Event Timing API','#sec-performance-event-timing','PerformanceEventTiming')}} | {{Spec2('Event Timing API')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.PerformanceEventTiming")}} -- cgit v1.2.3-54-g00ecf