1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
---
title: PerformanceEventTiming
slug: Web/API/PerformanceEventTiming
tags:
- API
- Event Timing API
- Interface
- Performance
- PerformanceEventTiming
- Reference
- 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 => {
// 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"]});
</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>
<pre class="brush: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.
}
</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>
|
