diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
| commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
| tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/performance_timeline | |
| parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
| download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/api/performance_timeline')
| -rw-r--r-- | files/fr/web/api/performance_timeline/index.md | 86 | ||||
| -rw-r--r-- | files/fr/web/api/performance_timeline/using_performance_timeline/index.md | 115 |
2 files changed, 86 insertions, 115 deletions
diff --git a/files/fr/web/api/performance_timeline/index.md b/files/fr/web/api/performance_timeline/index.md index db39bbf9bd..3bfdfee43d 100644 --- a/files/fr/web/api/performance_timeline/index.md +++ b/files/fr/web/api/performance_timeline/index.md @@ -11,74 +11,64 @@ tags: - Web Performance translation_of: Web/API/Performance_Timeline --- -<div>{{DefaultAPISidebar("Performance Timeline API")}}</div> +{{DefaultAPISidebar("Performance Timeline API")}} -<p>L'API <strong>Performance Timeline</strong> définit des extensions de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> pour prendre en charge les mesures de latence côté client dans les applications. Ces extensions fournissent des interfaces permettant de récupérer les <a href="/fr/docs/Web/API/PerformanceEntry">paramètres de saisie des performances</a> en fonction de critères de filtrage spécifiques.</p> +L'API **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 dans les applications. Ces extensions fournissent des interfaces permettant de récupérer les [paramètres de saisie des performances](/fr/docs/Web/API/PerformanceEntry) en fonction de critères de filtrage spécifiques. -<p>La norme comprend également des interfaces qui permettent à une application de définir des retours (« callbacks ») d'<em><a href="#performance_observers">observateur des performances</a></em>, qui sont notifiés lorsque des événements de performance spécifiques sont ajoutés à la <em>chronologie des performances</em> du navigateur.</p> +La norme comprend également des interfaces qui permettent à une application de définir des retours (« callbacks ») d'_[observateur des performances](#performance_observers)_, qui sont notifiés lorsque des événements de performance spécifiques sont ajoutés à la _chronologie des performances_ du navigateur. -<p>Ce document fournit un aperçu des interfaces de la norme. Pour plus de détails sur les interfaces, voir les pages de référence et <a href="/fr/docs/Web/API/Performance_Timeline/Using_Performance_Timeline">Utilisation de Performance Timeline</a>.</p> +Ce document fournit un aperçu des interfaces de la norme. Pour plus de détails sur les interfaces, voir les pages de référence et [Utilisation de Performance Timeline](/fr/docs/Web/API/Performance_Timeline/Using_Performance_Timeline). -<p>{{AvailableInWorkers}}</p> +{{AvailableInWorkers}} -<h2 id="Performance_extensions">Extensions de <code>Performance</code></h2> +## Extensions de `Performance` -<p>L'API Performance Timeline étend l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'<a href="/fr/docs/Web/API/PerformanceEntry">enregistrements des performances (métriques)</a>, en fonction des critères de filtrage spécifiés. Ces méthodes sont les suivantes :</p> +L'API Performance Timeline étend l'interface [`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), en fonction des critères de filtrage spécifiés. Ces méthodes sont les suivantes : -<dl> - <dt><a href="/fr/docs/Web/API/Performance/getEntries"><code>getEntries()</code></a></dt> - <dd>Renvoie toutes les <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a> enregistrées ou, éventuellement, les entrées basées sur les <a href="/fr/docs/Web/API/PerformanceEntry/name"><code>name</code></a>, <a href="/fr/docs/Web/API/PerformanceEntry">type de performance</a> et/ou les <a href="/fr/docs/Web/API/PerformanceResourceTiming/initiatorType"><code>initiatorType</code></a> spécifiés. (tel qu'un élément HTML).</dd> - <dt><a href="/fr/docs/Web/API/Performance/getEntriesByName"><code>getEntriesByName()</code></a></dt> - <dd>Renvoie les <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a> enregistrées en fonction du <a href="/fr/docs/Web/API/PerformanceEntry/name"><code>name</code></a> spécifié et éventuellement du <a href="/fr/docs/Web/API/PerformanceEntry">type de performance</a>.</dd> - <dt><a href="/fr/docs/Web/API/Performance/getEntriesByType"><code>getEntriesByType()</code></a></dt> - <dd>Renvoie les <a href="/fr/docs/Web/API/PerformanceEntry">entrées de perfornances</a> enregistrées en fonction des <a href="/fr/docs/Web/API/PerformanceEntry">types de performances</a> spécifiés.</dd> -</dl> +- [`getEntries()`](/fr/docs/Web/API/Performance/getEntries) + - : Renvoie toutes les [entrées de performances](/fr/docs/Web/API/PerformanceEntry) enregistrées ou, éventuellement, les entrées basées sur les [`name`](/fr/docs/Web/API/PerformanceEntry/name), [type de performance](/fr/docs/Web/API/PerformanceEntry) et/ou les [`initiatorType`](/fr/docs/Web/API/PerformanceResourceTiming/initiatorType) spécifiés. (tel qu'un élément HTML). +- [`getEntriesByName()`](/fr/docs/Web/API/Performance/getEntriesByName) + - : Renvoie les [entrées de performances](/fr/docs/Web/API/PerformanceEntry) enregistrées en fonction du [`name`](/fr/docs/Web/API/PerformanceEntry/name) spécifié et éventuellement du [type de performance](/fr/docs/Web/API/PerformanceEntry). +- [`getEntriesByType()`](/fr/docs/Web/API/Performance/getEntriesByType) + - : Renvoie les [entrées de perfornances](/fr/docs/Web/API/PerformanceEntry) enregistrées en fonction des [types de performances](/fr/docs/Web/API/PerformanceEntry) spécifiés. -<h2 id="PerformanceEntry_interface">L'interface <code>PerformanceEntry</code></h2> +## L'interface `PerformanceEntry` -<p>L'interface <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> encapsule une unique <em>entrée de performance</em>, c'est-à-dire un point de donnée ou une métrique située sur <em>la chronologie des performances</em>. Cette interface possède quatre propriétés ; ces propriétés sont étendues (avec des contraintes supplémentaires) par d'autres interfaces (telles que <a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a>) :</p> +L'interface [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) encapsule une unique _entrée de performance_, c'est-à-dire un point de donnée ou une métrique située sur _la chronologie des performances_. Cette interface possède quatre propriétés ; ces propriétés sont étendues (avec des contraintes supplémentaires) par d'autres interfaces (telles que [`PerformanceMark`](/fr/docs/Web/API/PerformanceMark)) : -<dl> - <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>name</code></a></dt> - <dd>Le nom de l'entrée de performance lorsque la métrique a été créée.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a></dt> - <dd>Le type de mesure de performance (par exemple, « <code>mark</code> »).</dd> - <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a></dt> - <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp">horodatage haute résolution</a> représentant l'heure de départ de l'entrée de performance.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>duration</code></a></dt> - <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp">horodatage haute résolution</a> représentant la valeur temporelle de la durée de l'événement de performance (certains <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrée</a> de performance n'ont pas de concept de <em>durée</em> et cette valeur est fixée à <code>'0'</code> pour ces types).</dd> -</dl> +- [`name`](/fr/docs/Web/API/PerformanceEntry/name) + - : Le nom de l'entrée de performance lorsque la métrique a été créée. +- [`entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) + - : Le type de mesure de performance (par exemple, « `mark` »). +- [`startTime`](/fr/docs/Web/API/PerformanceEntry/startTime) + - : Un [horodatage haute résolution](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'heure de départ de l'entrée de performance. +- [`duration`](/fr/docs/Web/API/PerformanceEntry/duration) + - : Un [horodatage haute résolution](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle de la durée de l'événement de performance (certains [types d'entrée](/fr/docs/Web/API/PerformanceEntry/entryType) de performance n'ont pas de concept de _durée_ et cette valeur est fixée à `'0'` pour ces types). -<p>Cette interface comprend une méthode <a href="/fr/docs/Web/API/PerformanceEntry/toJSON"><code>toJSON()</code></a> qui renvoie la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a>. La sérialisation varie selon le <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type de performance</a>.</p> +Cette interface comprend une méthode [`toJSON()`](/fr/docs/Web/API/PerformanceEntry/toJSON) qui renvoie la sérialisation de l'objet [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry). La sérialisation varie selon le [type de performance](/fr/docs/Web/API/PerformanceEntry/entryType). -<h2 id="Performance_observers">Observateurs des performances</h2> +## Observateurs des performances -<p>{{SeeCompatTable}}</p> +{{SeeCompatTable}} -<p>Les interfaces d'<em>observateurs de performance</em> permettent à une application d'enregistrer un <em>observateur</em> pour des types d'événements de performance spécifiques. Lorsqu'un de ces types d'événements est enregistré, l'application est <em>notifiée</em> de l'événement via la fonction de rappel de l'observateur qui a été spécifiée lors de la création de l'observateur.</p> +Les interfaces d'_observateurs de performance_ permettent à une application d'enregistrer un _observateur_ pour des types d'événements de performance spécifiques. 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 lors de la création de l'observateur. -<p>Lorsque la fonction de rappel de l'observateur (<i>callback</i>) est invoquée, les paramètres incluent une <em><a href="/fr/docs/Web/API/PerformanceObserverEntryList">liste des entrées de l'observateur de performance</a></em> qui contient uniquement des <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> <em>observées</em>. C'est-à-dire que la liste contient uniquement des entrées pour les types d'événements qui ont été spécifiés lorsque la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a> de l'observateur a été invoquée. L'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> possède les trois mêmes méthodes <code>getEntries*()</code> que l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>. Cependant, notez qu'il y a une différence clé avec ces méthodes ; les versions <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> sont utilisées pour récupérer les entrées de performance <em>observées</em> dans le rappel de l'observateur.</p> +Lorsque la fonction de rappel de l'observateur (_callback_) est invoquée, les paramètres incluent une _[liste des 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 contient uniquement 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'interface [`PerformanceObserverEntryList`](/fr/docs/Web/API/PerformanceObserverEntryList) possède les trois mêmes méthodes `getEntries*()` que l'interface [`Performance`](/fr/docs/Web/API/Performance). Cependant, notez qu'il y a une différence clé avec ces méthodes ; les versions [`PerformanceObserverEntryList`](/fr/docs/Web/API/PerformanceObserverEntryList) sont utilisées pour récupérer les entrées de performance _observées_ dans le rappel de l'observateur. -<p>Outre la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> (qui sert à enregistrer les <a href="/fr/docs/Web/API/PerformanceEntry">types d'entrées</a> pour <em>observer</em>), l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> possède également une méthode <a href="/fr/docs/Web/API/PerformanceObserver/disconnect"><code>disconnect()</code></a> qui empêche un observateur de recevoir d'autres événements.</p> +Outre la méthode [`observe()`](/fr/docs/Web/API/PerformanceObserver/observe) de l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) (qui sert à enregistrer les [types d'entrées](/fr/docs/Web/API/PerformanceEntry) pour _observer_), l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) possède également une méthode [`disconnect()`](/fr/docs/Web/API/PerformanceObserver/disconnect) qui empêche un observateur de recevoir d'autres événements. -<div class="note"> - <p><strong>Note :</strong> Les observateurs de performance ont été ajoutés au <code>Niveau 2</code> de la norme et n'ont pas été implémentés à grande échelle.</p> -</div> +> **Note :** Les observateurs de performance ont été ajoutés au `Niveau 2` de la norme et n'ont pas été implémentés à grande échelle. -<h2 id="Implementation_status">État de la mise en œuvre</h2> +## État de la mise en œuvre -<p>Un résumé de l'état de mise en œuvre des interfaces est fourni ci-dessous, avec un lien vers des informations plus détaillées.</p> +Un résumé de l'état de mise en œuvre des interfaces est fourni ci-dessous, avec un lien vers des informations plus détaillées. -<ul> - <li><strong>Les extensions de l'interface <code>Performance</code> :</strong> Comme le montre le tableau de <a href="/fr/docs/Web/API/Performance#browser_compatibility">Compatibilité des navigateurs</a> de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>, la plupart de ces interfaces sont largement prises en charge par les navigateurs de bureau et bénéficient d'un support moindre sur les appareils mobiles.</li> - <li><strong><code>PerformanceEntry</code> :</strong> Comme le montre le tableau de <a href="/fr/docs/Web/API/PerformanceEntry#browser_compatibility">Compatibilité des navigateurs</a> de l'interface <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a>, la plupart de ces interfaces sont largement prises en charge par les navigateurs de bureau et le sont moins sur les appareils mobiles.</li> - <li><strong><code>PerformanceObserver</code> {{experimental_inline}} :</strong> Comme le montre le tableau de <a href="/fr/docs/Web/API/PerformanceObserver#browser_compatibility">Compatibilité des navigateurs</a> de l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a>, cette interface n'est pas implémentée par les navigateurs.</li> -</ul> +- **Les extensions de l'interface `Performance` :** Comme le montre le tableau de [Compatibilité des navigateurs](/fr/docs/Web/API/Performance#browser_compatibility) de l'interface [`Performance`](/fr/docs/Web/API/Performance), la plupart de ces interfaces sont largement prises en charge par les navigateurs de bureau et bénéficient d'un support moindre sur les appareils mobiles. +- **`PerformanceEntry` :** Comme le montre le tableau de [Compatibilité des navigateurs](/fr/docs/Web/API/PerformanceEntry#browser_compatibility) de l'interface [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry), la plupart de ces interfaces sont largement prises en charge par les navigateurs de bureau et le sont moins sur les appareils mobiles. +- **`PerformanceObserver` {{experimental_inline}} :** Comme le montre le tableau de [Compatibilité des navigateurs](/fr/docs/Web/API/PerformanceObserver#browser_compatibility) de l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver), cette interface n'est pas implémentée par les navigateurs. -<p>Pour tester la prise en charge de ces interfaces par votre navigateur, vous pouvez exécuter l'application <code><a href="https://mdn.github.io/web-performance/perf-api-support.html">perf-api-support</a></code>.</p> +Pour tester la prise en charge de ces interfaces par votre navigateur, vous pouvez exécuter l'application [`perf-api-support`](https://mdn.github.io/web-performance/perf-api-support.html). -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://siusin.github.io/perf-timing-primer/">Une introduction aux API de chronométrage des performances du Web</a> <small>(en)</small></li> -</ul> +- [Une introduction aux API de chronométrage des performances du Web](https://siusin.github.io/perf-timing-primer/) (en) diff --git a/files/fr/web/api/performance_timeline/using_performance_timeline/index.md b/files/fr/web/api/performance_timeline/using_performance_timeline/index.md index c3554f1927..c6307ae61a 100644 --- a/files/fr/web/api/performance_timeline/using_performance_timeline/index.md +++ b/files/fr/web/api/performance_timeline/using_performance_timeline/index.md @@ -8,23 +8,23 @@ tags: - Web Performance translation_of: Web/API/Performance_Timeline/Using_Performance_Timeline --- -<div>{{DefaultAPISidebar("Performance Timeline API")}}</div> +{{DefaultAPISidebar("Performance Timeline API")}} -<p>La norme <strong><a href="https://w3c.github.io/performance-timeline/">Performance Timeline</a></strong> définit des extensions de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> pour prendre en charge les mesures de latence côté client au sein des applications.</p> +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. -<p>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.</p> +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. -<h2 id="Performance_extensions">Extensions de <code>Performance</code></h2> +## Extensions de `Performance` -<p><strong>Performance Timeline</strong> étend l'objet <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'<a href="/fr/docs/Web/API/PerformanceEntry">enregistrements des performances (métriques)</a>, selon les critères de filtrage spécifiés. L'exemple suivant montre l'utilisation de ces méthodes <a href="/fr/docs/Web/API/Performance/getEntries"><code>getEntries()</code></a>, <a href="/fr/docs/Web/API/Performance/getEntriesByName"><code>getEntriesByName()</code></a> et <a href="/fr/docs/Web/API/Performance/getEntriesByType"><code>getEntriesByType()</code></a>.</p> +**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). -<pre class="brush: js"> +```js function log(s) { let o = document.getElementsByTagName("output")[0]; - o.innerHTML += s + " <br>"; + o.innerHTML += s + " <br>"; } function do_work(n) { - for (let i=0 ; i < n; i++) { + for (let i=0 ; i < n; i++) { let m = Math.random(); } } @@ -49,39 +49,39 @@ function print_PerformanceEntries() { // Utilise getEntries() pour itérer toutes les entrées. let p = performance.getEntries(); - for (let i=0; i < p.length; i++) { + 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++) { + 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++) { + 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++) { + for (let i=0; i < p.length; i++) { log ("Begin et Mark [" + i + "]"); print_perf_entry(p[i]); } } -</pre> +``` -<h2 id="PerformanceEntry_interface">L'interface <code>PerformanceEntry</code></h2> +## L'interface `PerformanceEntry` -<p>L'interface <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> encapsule une seule <em>entrée de performance</em>, c'est-à-dire une seule métrique de performance. Cette interface possède quatre propriétés et un <em>sérialiseur</em> JSON : (<a href="/fr/docs/Web/API/Performance/toJSON"><code>toJSON()</code></a>. L'exemple suivant montre l'utilisation de ces propriétés.</p> +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. -<pre class="brush: js"> +```js function print_PerformanceEntry(ev) { let properties = ["name", "entryType", "startTime", "duration"]; @@ -92,9 +92,9 @@ function print_PerformanceEntry(ev) { performance.measure("measure-1"); let p = performance.getEntries(); - for (let i=0; i < p.length; i++) { + for (let i=0; i < p.length; i++) { log("PerfEntry[" + i + "]"); - for (let =0; j < properties.length; j++) { + for (let =0; j < properties.length; j++) { // check each property in window.performance let supported = properties[j] in p[i]; if (supported) { @@ -106,11 +106,11 @@ function print_PerformanceEntry(ev) { } } } -</pre> +``` -<p>Cette interface comprend également une méthode <a href="/fr/docs/Web/API/PerformanceEntry/toJSON"><code>toJSON()</code></a> qui renvoie la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a>. Les exemples suivants montrent l'utilisation de cette méthode.</p> +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. -<pre class="brush: js"> +```js function PerfEntry_toJSON() { // Crée quelques entrées de performance @@ -131,17 +131,17 @@ function PerfEntry_toJSON() { let s = JSON.stringify(json); log("PerformanceEntry.toJSON = " + s); } -</pre> +``` -<h2 id="Performance_Observers">Observateurs de performance</h2> +## Observateurs de performance -<p>{{SeeCompatTable}}</p> +{{SeeCompatTable}} -<p>Les interfaces <em>Performance Observer</em> permettent à une application d'enregistrer un <em>observateur</em> pour des types d'événements de performance spécifiques, et lorsqu'un de ces types d'événements est enregistré, l'application est <em>notifiée</em> 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 <em><a href="/fr/docs/Web/API/PerformanceObserverEntryList">liste d'entrées de l'observateur de performance</a></em> qui contient uniquement des <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> <em>observées</em>. 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 <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a> de l'observateur a été invoquée.</p> +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. -<p>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.</p> +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. -<pre class="brush: js"> +```js function PerformanceObservers() { // Crée un observateur pour tous les types d'événements de performance let observe_all = new PerformanceObserver(function(list, obs) { @@ -149,19 +149,19 @@ function PerformanceObservers() { // Imprime toutes les entrées perfEntries = list.getEntries(); - for (let i=0; i < perfEntries.length; i++) { + 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++) { + 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++) { + for (let i=0; i < perfEntries.length; i++) { print_perf_entry(perfEntries[i]); } }); @@ -172,7 +172,7 @@ function PerformanceObservers() { 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++) { + for (let i=0; i < perfEntries.length; i++) { print_perf_entry(perfEntries[i]); } }); @@ -185,39 +185,20 @@ function print_perf_entry(pe) { "; startTime: " + pe.startTime + "; duration: " + pe.duration); } -</pre> - -<p>L'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList">liste des entrées de l'observateur de performance</a> possède les trois mêmes méthodes <code>getEntries*()</code> que l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> et ces méthodes sont utilisées pour récupérer les entrées de performance <em>observées</em> dans le rappel de l'observateur. Ces méthodes ont été utilisées dans l'exemple cité ci-dessus.</p> - -<h2 id="Specifications">Spécifications</h2> - -<p>Les interfaces décrites dans ce document sont définies dans la norme <strong>Performance Timeline</strong> qui comporte deux niveaux :</p> - -<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('Performance Timeline', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td> - <td>{{Spec2('Performance Timeline')}}</td> - <td>Définition des méthodes <code>getEntries()</code>, <code>getEntriesByType()</code> et <code>getEntriesByName()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td> - <td>{{Spec2('Performance Timeline Level 2')}}</td> - <td>Modifications de l'interface <code>getEntries()</code>.</td> - </tr> - </tbody> - </table> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Performance_Timeline">Performance Timeline API</a></li> - <li><a href="https://siusin.github.io/perf-timing-primer/">Une introduction aux API de chronométrage des performances du Web</a></li> -</ul> +``` + +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/) |
