diff options
Diffstat (limited to 'files/fr/web/api/performanceeventtiming/index.md')
| -rw-r--r-- | files/fr/web/api/performanceeventtiming/index.md | 185 |
1 files changed, 84 insertions, 101 deletions
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 --- -<div>{{APIRef("Event Timing API")}}</div> - -<p>L'interface <code>PerformanceEventTiming</code> des événements de l'<code>Event Timing API</code> fournit des informations de chronométrage pour les types d'événements énumérés ci-dessous.</p> - -<ul> - <li><a href="/fr/docs/Web/API/Element/auxclick_event"><code>auxclick</code></a></li> - <li><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event"><code>beforeinput</code></a></li> - <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li> - <li><a href="/fr/docs/Web/API/Element/compositionend_event"><code>compositionend</code></a></li> - <li><a href="/fr/docs/Web/API/Element/compositionstart_event"><code>compositionstart</code></a></li> - <li><a href="/fr/docs/Web/API/Element/compositionupdate_event"><code>compositionupdate</code></a></li> - <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li> - <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li> - <li><a href="/fr/docs/Web/API/Document/dragend_event"><code>dragend</code></a></li> - <li><a href="/fr/docs/Web/API/Document/dragenter_event"><code>dragenter</code></a></li> - <li><a href="/fr/docs/Web/API/Document/dragleave_event"><code>dragleave</code></a></li> - <li><a href="/fr/docs/Web/API/Document/dragover_event"><code>dragover</code></a></li> - <li><a href="/fr/docs/Web/API/Document/dragstart_event"><code>dragstart</code></a></li> - <li><a href="/fr/docs/Web/API/Document/drop_event"><code>drop</code></a></li> - <li><a href="/fr/docs/Web/API/HTMLElement/input_event"><code>input</code></a></li> - <li><a href="/fr/docs/Web/API/Document/keydown_event"><code>keydown</code></a></li> - <li><a href="/fr/docs/Web/API/Document/keypress_event"><code>keypress</code></a></li> - <li><a href="/fr/docs/Web/API/Document/keyup_event"><code>keyup</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li> - <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li> - <li><a href="/fr/docs/Web/API/Document/pointerover_event"><code>pointerover</code></a></li> - <li><a href="/fr/docs/Web/API/Document/pointerenter_event"><code>pointerenter</code></a></li> - <li><a href="/fr/docs/Web/API/Document/pointerdown_event"><code>pointerdown</code></a></li> - <li><a href="/fr/docs/Web/API/Document/pointerup_event"><code>pointerup</code></a></li> - <li><a href="/fr/docs/Web/API/Document/pointercancel_event"><code>pointercancel</code></a></li> - <li><a href="/fr/docs/Web/API/Document/pointerout_event"><code>pointerout</code></a></li> - <li><a href="/fr/docs/Web/API/Document/pointerleave_event"><code>pointerleave</code></a></li> - <li><a href="/fr/docs/Web/API/Document/gotpointercapture_event"><code>gotpointercapture</code></a></li> - <li><a href="/fr/docs/Web/API/Document/lostpointercapture_event"><code>lostpointercapture</code></a></li> - <li><a href="/fr/docs/Web/API/Document/touchstart_event"><code>touchstart</code></a></li> - <li><a href="/fr/docs/Web/API/Document/touchend_event"><code>touchend</code></a></li> - <li><a href="/fr/docs/Web/API/Document/touchcancel_event"><code>touchcancel</code></a></li> -</ul> - -<h2 id="Properties">Propriétés</h2> - -<dl> - <dt><a href="/fr/docs/Web/API/PerformanceEventTiming/processingStart"><code>PerformanceEventTiming.processingStart</code></a> <em>lecture seule</em> {{ExperimentalBadge}}</dt> - <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure à laquelle la diffusion des événements a commencé.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceEventTiming/processingEnd"><code>PerformanceEventTiming.processingEnd</code></a> <em>lecture seule</em> {{ExperimentalBadge}}</dt> - <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure à laquelle la diffusion de l'événement s'est terminée.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceEventTiming/cancelable"><code>PerformanceEventTiming.cancelable</code></a> <em>lecture seule</em> {{ExperimentalBadge}}</dt> - <dd>Retourne un <a href="/fr/docs/Web/API/Boolean"><code>Boolean</code></a> représentant l'attribut annulable de l'événement associé.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceEventTiming/target"><code>PerformanceEventTiming.target</code></a> <em>lecture seule</em> {{NonStandardBadge}}</dt> - <dd>Retourne un <a href="/fr/docs/Web/API/Node"><code>Node</code></a> représentant la dernière cible de l'événement associé, si elle n'est pas supprimée.</dd> -</dl> - -<h2 id="Methods">Méthodes</h2> - -<dl> - <dt><a href="/fr/docs/Web/API/PerformanceEventTiming/toJSON()"><code>PerformanceEventTiming.toJSON()</code></a> {{ExperimentalBadge}}</dt> - <dd>Convertit l'objet <a href="/fr/docs/Web/API/PerformanceEventTiming"><code>PerformanceEventTiming</code></a> en JSON.</dd> -</dl> - -<h2 id="Examples">Exemples</h2> - -<p>L'exemple suivant montre comment utiliser l'API pour tous les événements :</p> - -<pre class="brush:js">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()`](</fr/docs/Web/API/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"]}); -</pre> +``` -<p>Nous pouvons également interroger directement le <a href="https://web.dev/fid">premier délai d'entrée</a>. 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.</p> +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. -<pre class="brush:js">// 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 <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) => { +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. } -</pre> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Event Timing API','#sec-performance-event-timing','PerformanceEventTiming')}}</td> - <td>{{Spec2('Event Timing API')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.PerformanceEventTiming")}}</p> +``` + +## 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")}} |