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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
|
---
title: Utilisation de Performance Timeline
slug: Web/API/Performance_Timeline/Using_Performance_Timeline
tags:
- Guide
- Performance
- Performance Web
- Web Performance
translation_of: Web/API/Performance_Timeline/Using_Performance_Timeline
---
{{DefaultAPISidebar("Performance Timeline API")}}
La norme **[Performance Timeline](https://w3c.github.io/performance-timeline/)** définit des extensions de l'interface [`Performance`](/fr/docs/Web/API/Performance) pour prendre en charge les mesures de latence côté client au sein des applications.
La norme comprend également des interfaces qui permettent à une application d'être notifiée lorsque des événements de performance spécifiques se produisent. Ensemble, ces interfaces peuvent être utilisées pour aider à identifier les goulots d'étranglement des performances d'une application.
## Extensions de `Performance`
**Performance Timeline** étend l'objet [`Performance`](/fr/docs/Web/API/Performance) avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'[enregistrements des performances (métriques)](/fr/docs/Web/API/PerformanceEntry), selon les critères de filtrage spécifiés. L'exemple suivant montre l'utilisation de ces méthodes [`getEntries()`](/fr/docs/Web/API/Performance/getEntries), [`getEntriesByName()`](/fr/docs/Web/API/Performance/getEntriesByName) et [`getEntriesByType()`](/fr/docs/Web/API/Performance/getEntriesByType).
```js
function log(s) {
let o = document.getElementsByTagName("output")[0];
o.innerHTML += s + " <br>";
}
function do_work(n) {
for (let i=0 ; i < n; i++) {
let m = Math.random();
}
}
function print_perf_entry(pe) {
log("..name: " + pe.name +
"; entryType: " + pe.entryType +
"; startTime: " + pe.startTime +
"; duration: " + pe.duration);
}
function print_PerformanceEntries() {
if (performance.mark === undefined) {
log("... performance.mark Not supported");
return;
}
// Crée quelques entrées de performance via les méthodes mark() et measure()
performance.mark("Begin");
do_work(50000);
performance.mark("End");
do_work(50000);
performance.measure("Measure1", "Begin", "End");
// Utilise getEntries() pour itérer toutes les entrées.
let p = performance.getEntries();
for (let i=0; i < p.length; i++) {
log("Toutes les entrées [" + i + "]");
print_perf_entry(p[i]);
}
// Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques.
p = performance.getEntries({name : "Measure1", entryType: "measure"});
for (let i=0; i < p.length; i++) {
log("Begin et Measure [" + i + "]");
print_perf_entry(p[i]);
}
// Utilisez getEntriesByType() pour obtenir toutes les entrées "mark".
p = performance.getEntriesByType("mark");
for (let i=0; i < p.length; i++) {
log ("Mark seulement [" + i + "]");
print_perf_entry(p[i]);
}
// Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin".
p = performance.getEntriesByName("Begin", "mark");
for (let i=0; i < p.length; i++) {
log ("Begin et Mark [" + i + "]");
print_perf_entry(p[i]);
}
}
```
## L'interface `PerformanceEntry`
L'interface [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) encapsule une seule _entrée de performance_, c'est-à-dire une seule métrique de performance. Cette interface possède quatre propriétés et un _sérialiseur_ JSON : ([`toJSON()`](/fr/docs/Web/API/Performance/toJSON). L'exemple suivant montre l'utilisation de ces propriétés.
```js
function print_PerformanceEntry(ev) {
let properties = ["name", "entryType", "startTime", "duration"];
// Crée quelques entrées de performance
performance.mark("Start");
do_work(50000);
performance.mark("Stop");
performance.measure("measure-1");
let p = performance.getEntries();
for (let i=0; i < p.length; i++) {
log("PerfEntry[" + i + "]");
for (let =0; j < properties.length; j++) {
// check each property in window.performance
let supported = properties[j] in p[i];
if (supported) {
let pe = p[i];
log("... " + properties[j] + " = " + pe[properties[j]]);
} else {
log("... " + properties[j] + " = N'est pas pris en charge");
}
}
}
}
```
Cette interface comprend également une méthode [`toJSON()`](/fr/docs/Web/API/PerformanceEntry/toJSON) qui renvoie la sérialisation de l'objet [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry). Les exemples suivants montrent l'utilisation de cette méthode.
```js
function PerfEntry_toJSON() {
// Crée quelques entrées de performance
performance.mark("mark-1");
performance.mark("mark-2");
performance.measure("meas-1", "mark-1", "mark-2");
let peList = performance.getEntries();
let pe = peList[0];
if (pe.toJSON === undefined) {
log("PerformanceEntry.toJSON() n'est PAS pris en charge");
return;
}
// Imprime l'objet PerformanceEntry
let json = pe.toJSON();
let s = JSON.stringify(json);
log("PerformanceEntry.toJSON = " + s);
}
```
## Observateurs de performance
{{SeeCompatTable}}
Les interfaces _Performance Observer_ permettent à une application d'enregistrer un _observateur_ pour des types d'événements de performance spécifiques, et lorsqu'un de ces types d'événements est enregistré, l'application est _notifiée_ de l'événement via la fonction de rappel de l'observateur qui a été spécifiée au moment, où l'observateur a été créé. Lorsque l'observateur (rappel ou « callback ») est invoqué, les paramètres du rappel incluent une _[liste d'entrées de l'observateur de performance](/fr/docs/Web/API/PerformanceObserverEntryList)_ qui contient uniquement des [entrées de performance](/fr/docs/Web/API/PerformanceEntry) _observées_. C'est-à-dire que la liste ne contient que des entrées pour les types d'événements qui ont été spécifiés lorsque la méthode [`observe()`](/fr/docs/Web/API/PerformanceObserver/observe) de l'observateur a été invoquée.
L'exemple suivant montre comment enregistrer deux observateurs : le premier s'enregistre pour plusieurs types d'événements et le second ne s'enregistre que pour un seul type d'événement.
```js
function PerformanceObservers() {
// Crée un observateur pour tous les types d'événements de performance
let observe_all = new PerformanceObserver(function(list, obs) {
let perfEntries;
// Imprime toutes les entrées
perfEntries = list.getEntries();
for (let i=0; i < perfEntries.length; i++) {
print_perf_entry(perfEntries[i]);
}
// Imprime les entrées nommées "Begin" avec le type "mark".
perfEntries = list.getEntriesByName("Begin", "mark");
for (let i=0; i < perfEntries.length; i++) {
print_perf_entry(perfEntries[i]);
}
// Imprime les entrées avec le type "mark".
perfEntries = list.getEntriesByType("mark");
for (let i=0; i < perfEntries.length; i++) {
print_perf_entry(perfEntries[i]);
}
});
// inscrit tous les types d'événements liés aux performances
observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
// Crée un observateur pour le seul type d'événement "mark".
let observe_mark = new PerformanceObserver(function(list, obs) {
let perfEntries = list.getEntries();
// Ne devrait avoir que des entrées de type "mark".
for (let i=0; i < perfEntries.length; i++) {
print_perf_entry(perfEntries[i]);
}
});
// inscrit uniquement l'événement "mark".
observe_mark.observe({entryTypes: ['mark']});
}
function print_perf_entry(pe) {
log("name: " + pe.name +
"; entryType: " + pe.entryType +
"; startTime: " + pe.startTime +
"; duration: " + pe.duration);
}
```
L'interface [liste des entrées de l'observateur de performance](/fr/docs/Web/API/PerformanceObserverEntryList) possède les trois mêmes méthodes `getEntries*()` que l'interface [`Performance`](/fr/docs/Web/API/Performance) et ces méthodes sont utilisées pour récupérer les entrées de performance _observées_ dans le rappel de l'observateur. Ces méthodes ont été utilisées dans l'exemple cité ci-dessus.
## Spécifications
Les interfaces décrites dans ce document sont définies dans la norme **Performance Timeline** qui comporte deux niveaux :
| Spécification | Statut | Commentaire |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| {{SpecName('Performance Timeline', '#extensions-to-the-performance-interface', 'Performance extensions')}} | {{Spec2('Performance Timeline')}} | Définition des méthodes `getEntries()`, `getEntriesByType()` et `getEntriesByName()`. |
| {{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}} | {{Spec2('Performance Timeline Level 2')}} | Modifications de l'interface `getEntries()`. |
## Voir aussi
- [Performance Timeline API](/fr/docs/Web/API/Performance_Timeline)
- [Une introduction aux API de chronométrage des performances du Web](https://siusin.github.io/perf-timing-primer/)
|
