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_api | |
| 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_api')
| -rw-r--r-- | files/fr/web/api/performance_api/index.md | 211 | ||||
| -rw-r--r-- | files/fr/web/api/performance_api/using_the_performance_api/index.md | 95 |
2 files changed, 111 insertions, 195 deletions
diff --git a/files/fr/web/api/performance_api/index.md b/files/fr/web/api/performance_api/index.md index 261219a03b..edce41a332 100644 --- a/files/fr/web/api/performance_api/index.md +++ b/files/fr/web/api/performance_api/index.md @@ -9,141 +9,76 @@ tags: - Performance Web translation_of: Web/API/Performance_API --- -<div>{{DefaultAPISidebar("High Resolution Time")}}</div> - -<p>La norme <a href="https://www.w3.org/TR/hr-time/">High Resolution Time</a> définit l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> qui prend en charge les mesures de latence côté client au sein des applications. Les interfaces <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> sont considérées comme étant à <em>haute résolution</em>, car elles sont précises au millième de milliseconde (sous réserve de contraintes matérielles ou logicielles).</p> - -<p>Les interfaces prennent en charge un certain nombre de cas d'utilisation, notamment le calcul des taux de trame (potentiellement important dans les animations) et l'évaluation comparative (comme le temps de chargement d'une ressource).</p> - -<p>Comme l'<em>horloge système</em> d'une plateforme est sujette à divers <em>décalages</em> (comme les ajustements NTP), les interfaces prennent en charge une <em>horloge monotone</em>, c'est-à-dire une horloge toujours croissante. À ce titre, l'API <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> définit un type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> plutôt que d'utiliser l'interface {{jsxref("Date.now", "Date.now()")}}.</p> - -<h2 id="DOMHighResTimeStamp">DOMHighResTimeStamp</h2> - -<p>Le type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a>, comme son nom l'indique, représente un point temporel de haute résolution. Ce type est un <code>double</code> et est utilisé par les interfaces de performance. La valeur peut être un point discret dans le temps ou la différence de temps entre deux points discrets dans le temps.</p> - -<p>L'unité de <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison, par exemple, de contraintes matérielles ou logicielles), le navigateur peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près.</p> - -<h2 id="Methods">Méthodes</h2> - -<p>L'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> possède deux méthodes. La méthode <a href="/fr/docs/Web/API/Performance/now"><code>now()</code></a> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> dont la valeur dépend de <a href="/fr/docs/Web/API/PerformanceTiming/navigationStart"><code>navigationStart</code></a> et du contexte. Si le contexte est une fenêtre, la valeur est l'heure de création du contexte du navigateur et si le contexte est un <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>, la valeur est l'heure de création du worker.</p> - -<p>La méthode <a href="/fr/docs/Web/API/Performance/toJSON"><code>toJSON()</code></a> renvoie une sérialisation de l'objet <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>, pour les attributs qui peuvent être sérialisés.</p> - -<h2 id="Properties">Propriétés</h2> - -<p>L'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> possède deux propriétés. La propriété <a href="/fr/docs/Web/API/Performance/timing"><code>timing</code></a> {{deprecated_inline}} renvoie un objet <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> contenant des informations de performance liées à la latence, telles que l'heure de début de navigation, les heures de début et de fin des redirections, les heures de début et de fin des réponses, etc.</p> - -<p>La propriété <a href="/fr/docs/Web/API/Performance/navigation"><code>navigation</code></a> {{deprecated_inline}} renvoie un objet <a href="/fr/docs/Web/API/PerformanceNavigation"><code>PerformanceNavigation</code></a> représentant le type de navigation qui se produit dans le contexte de navigation donné, comme la page vers laquelle on a navigué depuis l'historique, la page vers laquelle on a navigué en suivant un lien, etc.</p> - -<h2 id="Interfaces">Interfaces</h2> - -<dl> - <dt><a href="/fr/docs/Web/API/Performance"><code>Performance</code></a></dt> - <dd>Fournit des méthodes et des propriétés contenant des informations sur les performances liées au temps pour la page donnée.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a></dt> - <dd>Fournit des méthodes et des propriétés pour encapsuler une seule mesure de performance qui fait partie de la chronologie des performances.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceFrameTiming"><code>PerformanceFrameTiming</code></a></dt> - <dd>Fournit des méthodes et des propriétés contenant des données de synchronisation de trame sur la boucle d'événements du navigateur.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a></dt> - <dd>Une interface abstraite pour les <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> avec un <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type d'entrée</a> de « <code>mark</code> ». Les entrées de ce type sont créées en appelant <a href="/fr/docs/Web/API/Performance/mark"><code>performance.mark()</code></a> pour ajouter un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (un marqueur) à la chronologie des performances du navigateur.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceMeasure"><code>PerformanceMeasure</code></a></dt> - <dd>Une interface abstraite pour les <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> avec un <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type d'entrée</a> de « <code>measure</code> ». Les entrées de ce type sont créées en appelant <a href="/fr/docs/Web/API/Performance/measure"><code>performance.measure()</code></a> pour ajouter un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (une mesure) entre deux marqueurs à la chronologie des performances du navigateur.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a></dt> - <dd>Fournit des méthodes et des propriétés pour stocker et récupérer <a href="/fr/docs/Web/API/DOMHighResTimeStamp">les horodatages haute résolution</a> ou des métriques concernant les événements de navigation de document du navigateur.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a></dt> - <dd>Fournit des méthodes et des propriétés utilisées pour observer les événements de mesure des performances et être informé des nouvelles <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> lorsqu'elles sont enregistrées dans la chronologie des performances du navigateur.</dd> - <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a></dt> - <dd>Fournit des méthodes et des propriétés permettant de récupérer et d'analyser des données détaillées de synchronisation du réseau concernant le chargement des ressources d'une application.</dd> -</dl> - -<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('Highres Time')}}</td> - <td>{{Spec2('Highres Time')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('Highres Time Level 2')}}</td> - <td>{{Spec2('Highres Time Level 2')}}</td> - <td>Ajout de l'attribut <code>performance</code> sur <code>Window</code> et <code>WorkerGlobalScope</code>.</td> - </tr> - <tr> - <td>{{SpecName('Highres Time Level 3')}}</td> - <td>{{Spec2('Highres Time Level 3')}}</td> - <td>Ajout de la propriété <code>timeOrigin</code> à l'interface <code>Performance</code>.</td> - </tr> - <tr> - <td>{{SpecName('Frame Timing')}}</td> - <td>{{Spec2('Frame Timing')}}</td> - <td>Ajout de l'interface <code>PerformanceFrameTiming</code>.</td> - </tr> - <tr> - <td>{{SpecName('Navigation Timing')}}</td> - <td>{{Spec2('Navigation Timing')}}</td> - <td>Ajout des interfaces <code>PerformanceTiming</code> et <code>PerformanceNavigation</code>. Ajout des propriétés <code>timing</code> et <code>navigation</code> à l'interface <code>Performance</code>.</td> - </tr> - <tr> - <td>{{SpecName('Navigation Timing Level 2')}}</td> - <td>{{Spec2('Navigation Timing Level 2')}}</td> - <td>Ajout de l'interface <code>PerformanceNavigationTiming</code>. Rend obsolète l'interface <code>PerformanceTiming</code>, l'interface <code>PerformanceNavigation</code>, ainsi que les propriétés <code>timing</code> et <code>navigation</code> à l'interface <code>Performance</code>.</td> - </tr> - <tr> - <td>{{SpecName('Performance Timeline')}}</td> - <td>{{Spec2('Performance Timeline')}}</td> - <td>Ajout de l'interface <code>PerformanceEntry</code>, du type <code>PerformanceEntryList</code>, ainsi que les méthodes <code>getEntries()</code>, <code>getEntriesByType()</code>, et <code>getEntriesByName()</code> sur l'interface <code>Performance</code>.</td> - </tr> - <tr> - <td>{{SpecName('Performance Timeline Level 2')}}</td> - <td>{{Spec2('Performance Timeline Level 2')}}</td> - <td>Ajout d'un sérialiseur à l'interface <code>PerformanceEntry</code> ainsi que l'ajout de l'interface <code>PerformanceObserver</code> et du rappel (« callback »).</td> - </tr> - <tr> - <td>{{SpecName('Resource Timing')}}</td> - <td>{{Spec2('Resource Timing')}}</td> - <td>Ajout de l'interface <code>PerformanceResourceTiming</code>. Ajout de la méthode <code>clearResourceTiming()</code>, la méthode <code>setResourceTimingBufferSize()</code> et du gestionnaire d'événements <code>onresourcetimingbufferfull</code> à l'interface <code>Performance</code>. Ajout de l'en-tête de réponse <code>Timing-Allow-Origin</code>.</td> - </tr> - <tr> - <td>{{SpecName('Resource Timing 2')}}</td> - <td>{{Spec2('Resource Timing 2')}}</td> - <td>Ajout des propriétés <code>nextHopProtocol</code>, <code>workerStart</code>, <code>transferSize</code>, <code>encodedBodySize</code> et <code>decodedBodySize</code> à l'interface <code>PerformanceResourceTiming</code>.</td> - </tr> - <tr> - <td>{{SpecName('Resource Timing 3')}}</td> - <td>{{Spec2('Resource Timing 3')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('User Timing')}}</td> - <td>{{Spec2('User Timing')}}</td> - <td>Ajout des méthodes <code>mark()</code>, <code>clearMarks()</code>, <code>measure()</code> et <code>clearMeasures()</code> à l'interface <code>Performance</code>. Ajout des interfaces <code>PerformanceMark</code> et <code>PeformanceMeasure</code>.</td> - </tr> - <tr> - <td>{{SpecName('User Timing Level 2')}}</td> - <td>{{Spec2('User Timing Level 2')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Implementation_status">État de l'implémentation'</h2> - -<p>Comme le montre le tableau <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 implémentées par les navigateurs de bureau.</p> - -<p>Pour tester le support de votre navigateur pour l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>, exécutez l'application <code><a href="https://mdn.github.io/web-performance/perf-api-support.html">perf-api-support</a></code>.</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Performance_API/Using_the_Performance_API">Utilisation de l'API <code>Performance</code></a></li> - <li><a href="https://w3c.github.io/perf-timing-primer/">Une introduction aux API de chronométrage des performances du Web</a></li> -</ul> +{{DefaultAPISidebar("High Resolution Time")}} + +La norme [High Resolution Time](https://www.w3.org/TR/hr-time/) définit l'interface [`Performance`](/fr/docs/Web/API/Performance) qui prend en charge les mesures de latence côté client au sein des applications. Les interfaces [`Performance`](/fr/docs/Web/API/Performance) sont considérées comme étant à _haute résolution_, car elles sont précises au millième de milliseconde (sous réserve de contraintes matérielles ou logicielles). + +Les interfaces prennent en charge un certain nombre de cas d'utilisation, notamment le calcul des taux de trame (potentiellement important dans les animations) et l'évaluation comparative (comme le temps de chargement d'une ressource). + +Comme l'_horloge système_ d'une plateforme est sujette à divers _décalages_ (comme les ajustements NTP), les interfaces prennent en charge une _horloge monotone_, c'est-à-dire une horloge toujours croissante. À ce titre, l'API [`Performance`](/fr/docs/Web/API/Performance) définit un type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) plutôt que d'utiliser l'interface {{jsxref("Date.now", "Date.now()")}}. + +## DOMHighResTimeStamp + +Le type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp), comme son nom l'indique, représente un point temporel de haute résolution. Ce type est un `double` et est utilisé par les interfaces de performance. La valeur peut être un point discret dans le temps ou la différence de temps entre deux points discrets dans le temps. + +L'unité de [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison, par exemple, de contraintes matérielles ou logicielles), le navigateur peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près. + +## Méthodes + +L'interface [`Performance`](/fr/docs/Web/API/Performance) possède deux méthodes. La méthode [`now()`](/fr/docs/Web/API/Performance/now) renvoie un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) dont la valeur dépend de [`navigationStart`](/fr/docs/Web/API/PerformanceTiming/navigationStart) et du contexte. Si le contexte est une fenêtre, la valeur est l'heure de création du contexte du navigateur et si le contexte est un [`Worker`](/fr/docs/Web/API/Worker), la valeur est l'heure de création du worker. + +La méthode [`toJSON()`](/fr/docs/Web/API/Performance/toJSON) renvoie une sérialisation de l'objet [`Performance`](/fr/docs/Web/API/Performance), pour les attributs qui peuvent être sérialisés. + +## Propriétés + +L'interface [`Performance`](/fr/docs/Web/API/Performance) possède deux propriétés. La propriété [`timing`](/fr/docs/Web/API/Performance/timing) {{deprecated_inline}} renvoie un objet [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) contenant des informations de performance liées à la latence, telles que l'heure de début de navigation, les heures de début et de fin des redirections, les heures de début et de fin des réponses, etc. + +La propriété [`navigation`](/fr/docs/Web/API/Performance/navigation) {{deprecated_inline}} renvoie un objet [`PerformanceNavigation`](/fr/docs/Web/API/PerformanceNavigation) représentant le type de navigation qui se produit dans le contexte de navigation donné, comme la page vers laquelle on a navigué depuis l'historique, la page vers laquelle on a navigué en suivant un lien, etc. + +## Interfaces + +- [`Performance`](/fr/docs/Web/API/Performance) + - : Fournit des méthodes et des propriétés contenant des informations sur les performances liées au temps pour la page donnée. +- [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) + - : Fournit des méthodes et des propriétés pour encapsuler une seule mesure de performance qui fait partie de la chronologie des performances. +- [`PerformanceFrameTiming`](/fr/docs/Web/API/PerformanceFrameTiming) + - : Fournit des méthodes et des propriétés contenant des données de synchronisation de trame sur la boucle d'événements du navigateur. +- [`PerformanceMark`](/fr/docs/Web/API/PerformanceMark) + - : Une interface abstraite pour les [entrées de performance](/fr/docs/Web/API/PerformanceEntry) avec un [type d'entrée](/fr/docs/Web/API/PerformanceEntry/entryType) de « `mark` ». Les entrées de ce type sont créées en appelant [`performance.mark()`](/fr/docs/Web/API/Performance/mark) pour ajouter un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) (un marqueur) à la chronologie des performances du navigateur. +- [`PerformanceMeasure`](/fr/docs/Web/API/PerformanceMeasure) + - : Une interface abstraite pour les [entrées de performance](/fr/docs/Web/API/PerformanceEntry) avec un [type d'entrée](/fr/docs/Web/API/PerformanceEntry/entryType) de « `measure` ». Les entrées de ce type sont créées en appelant [`performance.measure()`](/fr/docs/Web/API/Performance/measure) pour ajouter un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) (une mesure) entre deux marqueurs à la chronologie des performances du navigateur. +- [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) + - : Fournit des méthodes et des propriétés pour stocker et récupérer [les horodatages haute résolution](/fr/docs/Web/API/DOMHighResTimeStamp) ou des métriques concernant les événements de navigation de document du navigateur. +- [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) + - : Fournit des méthodes et des propriétés utilisées pour observer les événements de mesure des performances et être informé des nouvelles [entrées de performance](/fr/docs/Web/API/PerformanceEntry) lorsqu'elles sont enregistrées dans la chronologie des performances du navigateur. +- [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming) + - : Fournit des méthodes et des propriétés permettant de récupérer et d'analyser des données détaillées de synchronisation du réseau concernant le chargement des ressources d'une application. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------ | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('Highres Time')}} | {{Spec2('Highres Time')}} | Définition initiale. | +| {{SpecName('Highres Time Level 2')}} | {{Spec2('Highres Time Level 2')}} | Ajout de l'attribut `performance` sur `Window` et `WorkerGlobalScope`. | +| {{SpecName('Highres Time Level 3')}} | {{Spec2('Highres Time Level 3')}} | Ajout de la propriété `timeOrigin` à l'interface `Performance`. | +| {{SpecName('Frame Timing')}} | {{Spec2('Frame Timing')}} | Ajout de l'interface `PerformanceFrameTiming`. | +| {{SpecName('Navigation Timing')}} | {{Spec2('Navigation Timing')}} | Ajout des interfaces `PerformanceTiming` et `PerformanceNavigation`. Ajout des propriétés `timing` et `navigation` à l'interface `Performance`. | +| {{SpecName('Navigation Timing Level 2')}} | {{Spec2('Navigation Timing Level 2')}} | Ajout de l'interface `PerformanceNavigationTiming`. Rend obsolète l'interface `PerformanceTiming`, l'interface `PerformanceNavigation`, ainsi que les propriétés `timing` et `navigation` à l'interface `Performance`. | +| {{SpecName('Performance Timeline')}} | {{Spec2('Performance Timeline')}} | Ajout de l'interface `PerformanceEntry`, du type `PerformanceEntryList`, ainsi que les méthodes `getEntries()`, `getEntriesByType()`, et `getEntriesByName()` sur l'interface `Performance`. | +| {{SpecName('Performance Timeline Level 2')}} | {{Spec2('Performance Timeline Level 2')}} | Ajout d'un sérialiseur à l'interface `PerformanceEntry` ainsi que l'ajout de l'interface `PerformanceObserver` et du rappel (« callback »). | +| {{SpecName('Resource Timing')}} | {{Spec2('Resource Timing')}} | Ajout de l'interface `PerformanceResourceTiming`. Ajout de la méthode `clearResourceTiming()`, la méthode `setResourceTimingBufferSize()` et du gestionnaire d'événements `onresourcetimingbufferfull` à l'interface `Performance`. Ajout de l'en-tête de réponse `Timing-Allow-Origin`. | +| {{SpecName('Resource Timing 2')}} | {{Spec2('Resource Timing 2')}} | Ajout des propriétés `nextHopProtocol`, `workerStart`, `transferSize`, `encodedBodySize` et `decodedBodySize` à l'interface `PerformanceResourceTiming`. | +| {{SpecName('Resource Timing 3')}} | {{Spec2('Resource Timing 3')}} | | +| {{SpecName('User Timing')}} | {{Spec2('User Timing')}} | Ajout des méthodes `mark()`, `clearMarks()`, `measure()` et `clearMeasures()` à l'interface `Performance`. Ajout des interfaces `PerformanceMark` et `PeformanceMeasure`. | +| {{SpecName('User Timing Level 2')}} | {{Spec2('User Timing Level 2')}} | | + +## État de l'implémentation' + +Comme le montre le tableau [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 implémentées par les navigateurs de bureau. + +Pour tester le support de votre navigateur pour l'interface [`Performance`](/fr/docs/Web/API/Performance), exécutez l'application [`perf-api-support`](https://mdn.github.io/web-performance/perf-api-support.html). + +## Voir aussi + +- [Utilisation de l'API `Performance`](/fr/docs/Web/API/Performance_API/Using_the_Performance_API) +- [Une introduction aux API de chronométrage des performances du Web](https://w3c.github.io/perf-timing-primer/) diff --git a/files/fr/web/api/performance_api/using_the_performance_api/index.md b/files/fr/web/api/performance_api/using_the_performance_api/index.md index 19924b66cc..d35c9d351b 100644 --- a/files/fr/web/api/performance_api/using_the_performance_api/index.md +++ b/files/fr/web/api/performance_api/using_the_performance_api/index.md @@ -9,21 +9,21 @@ tags: - Performance Web translation_of: Web/API/Performance_API/Using_the_Performance_API --- -<div>{{DefaultAPISidebar("High Resolution Time")}}</div> +{{DefaultAPISidebar("High Resolution Time")}} -<p>Une exigence fondamentale de la performance web est une définition précise et cohérente du <em>temps.</em> Le type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (un <code>double</code>) est utilisé par toutes les interfaces de performance pour contenir de telles valeurs de temps.</p> +Une exigence fondamentale de la performance web est une définition précise et cohérente du _temps._ Le type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) (un `double`) est utilisé par toutes les interfaces de performance pour contenir de telles valeurs de temps. -<p>En outre, il doit y avoir un moyen de créer une <em>empreinte temporelle</em> pour un point spécifique dans le temps ; ceci est fait avec la méthode <a href="/fr/docs/Web/API/Performance/now"><code>now()</code></a>.</p> +En outre, il doit y avoir un moyen de créer une _empreinte temporelle_ pour un point spécifique dans le temps ; ceci est fait avec la méthode [`now()`](/fr/docs/Web/API/Performance/now). -<p>Les interfaces de performance web sont définies dans un <a href="https://www.w3.org/wiki/Web_Performance/Publications">ensemble de normes</a>. L'interface <em>de base</em> de ces normes est l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> et ses méthodes et propriétés sont étendues par différentes normes. Ce guide décrit comment utiliser les interfaces <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> qui sont définies dans la norme <a href="https://w3c.github.io/hr-time/">High-Resolution Time</a>. D'autres guides sur les performances web (répertoriés dans la section <a href="#see_also">Voir aussi</a>) décrivent comment utiliser des méthodes et propriétés supplémentaires de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>.</p> +Les interfaces de performance web sont définies dans un [ensemble de normes](https://www.w3.org/wiki/Web_Performance/Publications). L'interface _de base_ de ces normes est l'interface [`Performance`](/fr/docs/Web/API/Performance) et ses méthodes et propriétés sont étendues par différentes normes. Ce guide décrit comment utiliser les interfaces [`Performance`](/fr/docs/Web/API/Performance) qui sont définies dans la norme [High-Resolution Time](https://w3c.github.io/hr-time/). D'autres guides sur les performances web (répertoriés dans la section [Voir aussi](#see_also)) décrivent comment utiliser des méthodes et propriétés supplémentaires de l'interface [`Performance`](/fr/docs/Web/API/Performance). -<h2 id="High_precision_timing">Chronométrage de haute précision</h2> +## Chronométrage de haute précision -<p><em>Le chronométrage de haute précision</em> est obtenu en utilisant le type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> pour les valeurs de temps. L'unité est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison de contraintes matérielles ou logicielles, par exemple), il peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près.</p> +_Le chronométrage de haute précision_ est obtenu en utilisant le type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) pour les valeurs de temps. L'unité est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison de contraintes matérielles ou logicielles, par exemple), il peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près. -<p>L'exemple de code suivant montre l'utilisation de <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> et de la méthode <a href="/fr/docs/Web/API/Performance/now"><code>Performance.now()</code></a>. La méthode <a href="/fr/docs/Web/API/Performance/now"><code>now()</code></a> renvoie un <em>timestamp</em> (de type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a>) qui est un point discret dans le temps. En appelant cette méthode avant et après une tâche, il est possible de mesurer le temps nécessaire à l'exécution de la tâche.</p> +L'exemple de code suivant montre l'utilisation de [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) et de la méthode [`Performance.now()`](/fr/docs/Web/API/Performance/now). La méthode [`now()`](/fr/docs/Web/API/Performance/now) renvoie un _timestamp_ (de type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp)) qui est un point discret dans le temps. En appelant cette méthode avant et après une tâche, il est possible de mesurer le temps nécessaire à l'exécution de la tâche. -<pre class="brush: js"> +```js function calculate_time() { let startTime; let endTime; @@ -34,76 +34,57 @@ function calculate_time() { return (endTime - startTime); } -</pre> +``` -<h2 id="Serializing_the_Performance_object">Sérialisation de l'objet <code>Performance</code></h2> +## Sérialisation de l'objet `Performance` -<p>La sérialisation JSON de l'objet <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> est effectuée via la méthode <a href="/fr/docs/Web/API/Performance/toJSON"><code>toJSON()</code></a>. Dans l'exemple suivant, la sérialisation JSON des objets <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>, <a href="/fr/docs/Web/API/Performance/timing"><code>Performance.timing</code></a> {{deprecated_inline}} et <a href="/fr/docs/Web/API/Performance/navigation"><code>Performance.navigation</code></a> {{deprecated_inline}} est imprimée dans l'élément <code>object</code>.</p> +La sérialisation JSON de l'objet [`Performance`](/fr/docs/Web/API/Performance) est effectuée via la méthode [`toJSON()`](/fr/docs/Web/API/Performance/toJSON). Dans l'exemple suivant, la sérialisation JSON des objets [`Performance`](/fr/docs/Web/API/Performance), [`Performance.timing`](/fr/docs/Web/API/Performance/timing) {{deprecated_inline}} et [`Performance.navigation`](/fr/docs/Web/API/Performance/navigation) {{deprecated_inline}} est imprimée dans l'élément `object`. -<pre class="brush: js"> +```js function print_json() { let json; let o = document.getElementsByTagName("output")[0]; if (window.performance.toJSON === undefined) { json = "window.performance.toJSON() n'est PAS pris en charge"; - o.innerHTML += json + "<br>"; + o.innerHTML += json + "<br>"; } else { let s; json = window.performance.toJSON(); // Imprimer l'objet de performance s = JSON.stringify(json); - o.innerHTML = "<p>performance = " + s + "</p>"; + o.innerHTML = "<p>performance = " + s + "</p>"; // Imprimer les objets performance.timing et performance.navigation let perf = JSON.parse(s); let timing = perf.timing; - o.innerHTML += "<p>peformance.timing = " + JSON.stringify(timing) + "</p>"; + o.innerHTML += "<p>peformance.timing = " + JSON.stringify(timing) + "</p>"; let navigation = perf.navigation; - o.innerHTML += "<p>peformance.navigation = " + JSON.stringify(navigation) + "</p>"; + o.innerHTML += "<p>peformance.navigation = " + JSON.stringify(navigation) + "</p>"; } } -</pre> - -<h2 id="Specifications">Spécifications</h2> - -<p>Les interfaces décrites dans ce document sont définies dans la norme <code>High Resolution Time</code> 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('Highres Time Level 2')}}</td> - <td>{{Spec2('Highres Time Level 2')}}</td> - <td>Ajout de l'attribut <code>performance</code> sur <code>Window</code> et <code>WorkerGlobalScope</code>.</td> - </tr> - <tr> - <td>{{SpecName('Highres Time')}}</td> - <td>{{Spec2('Highres Time')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Interoperability">Interopérabilité</h2> - -<p>Comme le montre le tableau des <a href="/fr/docs/Web/API/Performance#browser_compatibility">Compatibilités des navigateurs</a> de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>, la plupart des interfaces <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> sont largement implémentées par les navigateurs de bureau.</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Performance_API">Aperçu de l'API Performance</a></li> - <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> - <li><a href="https://docs.google.com/document/d/1ZKW9N0cteHgK91SyYQONFuy2ZW6J4Oak398niTo232E/edit">Graphique des couches de performance Web</a> <small>(en)</small></li> - <li><a href="https://caniuse.com/#search=high-resolution-time">CanIUse données pour le Temps à haute résolution</a> <small>(en)</small></li> - <li><a href="https://www.w3.org/wiki/Web_Performance/Publications">Web Performance Standards Status and Roadmap</a> <small>(en)</small></li> -</ul> +``` + +## Spécifications + +Les interfaces décrites dans ce document sont définies dans la norme `High Resolution Time` qui comporte deux niveaux : + +| Spécification | Statut | Commentaire | +| ------------------------------------------------ | -------------------------------------------- | ---------------------------------------------------------------------- | +| {{SpecName('Highres Time Level 2')}} | {{Spec2('Highres Time Level 2')}} | Ajout de l'attribut `performance` sur `Window` et `WorkerGlobalScope`. | +| {{SpecName('Highres Time')}} | {{Spec2('Highres Time')}} | Définition initiale. | + +## Interopérabilité + +Comme le montre le tableau des [Compatibilités des navigateurs](/fr/docs/Web/API/Performance#browser_compatibility) de l'interface [`Performance`](/fr/docs/Web/API/Performance), la plupart des interfaces [`Performance`](/fr/docs/Web/API/Performance) sont largement implémentées par les navigateurs de bureau. + +## Voir aussi + +- [Aperçu de l'API Performance](/fr/docs/Web/API/Performance_API) +- [Une introduction aux API de chronométrage des performances du Web](https://siusin.github.io/perf-timing-primer/) (en) +- [Graphique des couches de performance Web](https://docs.google.com/document/d/1ZKW9N0cteHgK91SyYQONFuy2ZW6J4Oak398niTo232E/edit) (en) +- [CanIUse données pour le Temps à haute résolution](https://caniuse.com/#search=high-resolution-time) (en) +- [Web Performance Standards Status and Roadmap](https://www.w3.org/wiki/Web_Performance/Publications) (en) |
