diff options
Diffstat (limited to 'files/fr/web/api')
99 files changed, 7803 insertions, 0 deletions
diff --git a/files/fr/web/api/performance_api/index.html b/files/fr/web/api/performance_api/index.html new file mode 100644 index 0000000000..adcb3ced5c --- /dev/null +++ b/files/fr/web/api/performance_api/index.html @@ -0,0 +1,147 @@ +--- +title: Performance API +slug: Web/API/Performance_API +tags: + - API + - Guide + - Aperçu + - Performance + - Performance Web +translation_of: Web/API/Performance_API +--- +<div>{{DefaultAPISidebar("High Resolution Time")}}</div> + +<p class="summary"><span class="seoSummary">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).</span> 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> diff --git a/files/fr/web/api/performance_api/using_the_performance_api/index.html b/files/fr/web/api/performance_api/using_the_performance_api/index.html new file mode 100644 index 0000000000..7386e4081a --- /dev/null +++ b/files/fr/web/api/performance_api/using_the_performance_api/index.html @@ -0,0 +1,107 @@ +--- +title: Utilisation de l'API Performance +slug: Web/API/Performance_API/Using_the_Performance_API +tags: + - API + - Guide + - Aperçu + - Performance + - Performance Web +translation_of: Web/API/Performance_API/Using_the_Performance_API +--- +<div>{{DefaultAPISidebar("High Resolution Time")}}</div> + +<p class="summary"><span class="seoSummary">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.</span> 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> + +<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> + +<h2 id="High_precision_timing">Chronométrage de haute précision</h2> + +<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> + +<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> + +<pre class="brush: js"> +function calculate_time() { + let startTime; + let endTime; + + startTime = performance.now(); + do_task(); + endTime = performance.now(); + + return (endTime - startTime); +} +</pre> + +<h2 id="Serializing_the_Performance_object">Sérialisation de l'objet <code>Performance</code></h2> + +<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> + +<pre class="brush: 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>"; + } else { + let s; + json = window.performance.toJSON(); + + // Imprimer l'objet de performance + s = JSON.stringify(json); + 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>"; + + let navigation = perf.navigation; + 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> diff --git a/files/fr/web/api/performance_timeline/index.html b/files/fr/web/api/performance_timeline/index.html new file mode 100644 index 0000000000..0d6975484b --- /dev/null +++ b/files/fr/web/api/performance_timeline/index.html @@ -0,0 +1,80 @@ +--- +title: Performance Timeline API +slug: Web/API/Performance_Timeline +tags: + - API + - Guide + - Aperçu + - Performance + - Performance Web + - Overview + - Web Performance +translation_of: Web/API/Performance_Timeline +--- +<div>{{DefaultAPISidebar("Performance Timeline API")}}</div> + +<p class="summary"><span class="seoSummary">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.</span> 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> + +<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> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Performance_extensions">Extensions de <code>Performance</code></h2> + +<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> + +<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> + +<h2 id="PerformanceEntry_interface">L'interface <code>PerformanceEntry</code></h2> + +<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> + +<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> + +<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> + +<h2 id="Performance_observers">Observateurs des performances</h2> + +<p>{{SeeCompatTable}}</p> + +<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> + +<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> + +<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> + +<p class="notecard note">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> + +<h2 id="Implementation_status">État de la mise en œuvre</h2> + +<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> + +<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> + +<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> + +<h2 id="See_also">Voir aussi</h2> + +<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> diff --git a/files/fr/web/api/performance_timeline/using_performance_timeline/index.html b/files/fr/web/api/performance_timeline/using_performance_timeline/index.html new file mode 100644 index 0000000000..d765a543c8 --- /dev/null +++ b/files/fr/web/api/performance_timeline/using_performance_timeline/index.html @@ -0,0 +1,221 @@ +--- +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 +--- +<div>{{DefaultAPISidebar("Performance Timeline API")}}</div> + +<p><span class="seoSummary">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.</span> 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> + +<h2 id="Performance_extensions">Extensions de <code>Performance</code></h2> + +<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> + +<pre class="brush: 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]); + } +} +</pre> + +<h2 id="PerformanceEntry_interface">L'interface <code>PerformanceEntry</code></h2> + +<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> + +<pre class="brush: 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"); + } + } + } +} +</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> + +<pre class="brush: 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); +} +</pre> + +<h2 id="Performance_Observers">Observateurs de performance</h2> + +<p>{{SeeCompatTable}}</p> + +<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> + +<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> + +<pre class="brush: 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); +} +</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> diff --git a/files/fr/web/api/performanceelementtiming/element/index.html b/files/fr/web/api/performanceelementtiming/element/index.html new file mode 100644 index 0000000000..fc8b8119f5 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/element/index.html @@ -0,0 +1,62 @@ +--- +title: PerformanceElementTiming.element +slug: Web/API/PerformanceElementTiming/element +tags: + - API + - Property + - Propriété + - Reference + - element + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/element +--- +<div>{{APIRef("Element Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>element</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> qui est une représentation littérale de l'élément associé.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">var <var>element</var> = <var>PerformanceElementTiming</var>.element;</pre> + +<h3>Valeur</h3> +<p>Un objet de type <a href="/fr/docs/Web/API/Element"><code>Element</code></a>.</p> + +<h2 id="Examples">Exemples</h2> + +<p>Dans cet exemple, l'appel à <code>entry.element</code> va enregistrer dans la console <code><img src="image.jpg" alt="une belle image" elementtiming="big-image"></code>.</p> + +<pre class="brush:html"><img src="image.jpg" alt="une belle image" elementtiming="big-image"></pre> + +<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => { + let <var>entries</var> = list.getEntries().forEach(function (entry) { + if (entry.identifier === "big-image") { + console.log(entry.element); + } + }); +}); +observer.observe({ entryTypes: ["element"] });</pre> + +<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> + +<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('Element Timing API','#dom-performanceelementtiming-element','PerformanceElementTiming.element')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceElementTiming.element")}}</p> diff --git a/files/fr/web/api/performanceelementtiming/id/index.html b/files/fr/web/api/performanceelementtiming/id/index.html new file mode 100644 index 0000000000..36e2a07b92 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/id/index.html @@ -0,0 +1,62 @@ +--- +title: PerformanceElementTiming.id +slug: Web/API/PerformanceElementTiming/id +tags: + - API + - Property + - Propriété + - Reference + - id + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/id +--- +<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>id</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément associé.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">var <var>id</var> = <var>PerformanceElementTiming</var>.id;</pre> + +<h3>Valeur</h3> +<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p> + +<h2 id="Examples">Exemples</h2> + +<p>Dans cet exemple, l'appel à <code>entry.id</code> entraînera l'affichage dans la console du code <code>myImage</code>, qui est l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément image.</p> + +<pre class="brush:html"><img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"></pre> + +<pre class="brush:js">const observer = new PerformanceObserver((list) => { +let entries = list.getEntries().forEach(function (entry) { + if (entry.identifier === "big-image") { + console.log(entry.id); + } + }); +}); +observer.observe({ entryTypes: ["element"] });</pre> + +<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> + +<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('Element Timing API','#dom-performanceelementtiming-id','PerformanceElementTiming.id')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceElementTiming.id")}}</p> diff --git a/files/fr/web/api/performanceelementtiming/identifier/index.html b/files/fr/web/api/performanceelementtiming/identifier/index.html new file mode 100644 index 0000000000..9c07117bb3 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/identifier/index.html @@ -0,0 +1,62 @@ +--- +title: PerformanceElementTiming.identifier +slug: Web/API/PerformanceElementTiming/identifier +tags: + - API + - Property + - Propriété + - Reference + - identifier + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/identifier +--- +<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>identifier</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la valeur de l'attribut <code><a href="/fr/docs/Web/HTML/Attributes/elementtiming">elementtiming</a></code> sur l'élément.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">var <var>identifier</var> = <var>PerformanceElementTiming</var>.identifier;</pre> + +<h3>Valeur</h3> +<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p> + +<h2 id="Examples">Examples</h2> + +<p>Dans cet exemple, la valeur de <code><a href="/fr/docs/Web/HTML/Attributes/elementtiming">elementtiming</a></code> est <code>big-image</code>. L'appel à <code>entry.indentifier</code> renvoie donc la chaîne de caractères <code>big-image</code>.</p> + +<pre class="brush:html"><img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"></pre> + +<pre class="brush:js">const observer = new PerformanceObserver((list) => { + let entries = list.getEntries().forEach(function (entry) { + if (entry.identifier === "big-image") { + console.log(entry.naturalWidth); + } + }); +}); +observer.observe({ entryTypes: ["element"] });</pre> + +<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> + +<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('Element Timing API','#dom-performanceelementtiming-identifier','PerformanceElementTiming.identifier')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceElementTiming.identifier")}}</p> diff --git a/files/fr/web/api/performanceelementtiming/index.html b/files/fr/web/api/performanceelementtiming/index.html new file mode 100644 index 0000000000..03a76a40a5 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/index.html @@ -0,0 +1,82 @@ +--- +title: PerformanceElementTiming +slug: Web/API/PerformanceElementTiming +tags: + - API + - Interface + - Reference + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming +--- +<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div> + +<p class="summary">L'interface <strong><code>PerformanceElementTiming</code></strong> de l'API <a href="/fr/docs/Web/API/Element_timing_API">Element Timing API</a> rapporte les informations de timing sur un élément spécifique identifié par l'auteur de la page. Par exemple, elle peut fournir des informations sur l'image principale d'un article.</p> + +<h2 id="Properties">Propriétés</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/element"><code>PerformanceElementTiming.element</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> représentant l'élément pour lequel nous retournons des informations.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/id"><code>PerformanceElementTiming.id</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'identifiant (attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>) de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/identifier"><code>PerformanceElementTiming.identifier</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt> + <dd>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la valeur de l'attribut <a href="/fr/docs/Web/HTML/Attributes/elementtiming"><code>elementtiming</code></a> de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/intersectionRect"><code>PerformanceElementTiming.intersectionRect</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> qui est le rectangle de l'élément dans la fenêtre d'affichage.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/loadTime"><code>PerformanceElementTiming.loadTime</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec l'heure de chargement de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/naturalHeight"><code>PerformanceElementTiming.naturalHeight</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt> + <dd>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/naturalWidth"><code>PerformanceElementTiming.naturalWidth</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt> + <dd>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/renderTime"><code>PerformanceElementTiming.renderTime</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le renderTime de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/url"><code>PerformanceElementTiming.url</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt> + <dd>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'URL initiale de la demande de ressources pour les images, 0 pour le texte.</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/toJSON"><code>PerformanceElementTiming.toJSON()</code></a> {{Experimental_Inline}} {{Non-Standard_Inline}}</dt> + <dd>Génère une description JSON de l'objet.</dd> +</dl> + +<h2 id="Examples">Exemples</h2> + +<p>Dans cet exemple, nous avons deux éléments qui sont observés. Nous utilisons l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, l'observation de l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entrytype</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> + +<p>Deux entrées seront affichées dans la console. La première contenant les détails de l'image, la seconde les détails du nœud texte.</p> + +<pre class="brush: html"><img src="image.jpg" elementtiming="big-image"> +<p elementtiming="text" id="text-id">le texte ici</p></pre> + +<pre class="brush: js">const observer = new PerformanceObserver((list) => { + let entries = list.getEntries().forEach(function (entry) { + console.log(entry); + }); +}); +observer.observe({ entryTypes: ["element"] });</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('Element Timing API','#sec-performance-element-timing','PerformanceElementTiming')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceElementTiming")}}</p> diff --git a/files/fr/web/api/performanceelementtiming/intersectionrect/index.html b/files/fr/web/api/performanceelementtiming/intersectionrect/index.html new file mode 100644 index 0000000000..b37c4e77ea --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/intersectionrect/index.html @@ -0,0 +1,64 @@ +--- +title: PerformanceElementTiming.intersectionRect +slug: Web/API/PerformanceElementTiming/intersectionRect +tags: + - API + - Property + - Propriété + - Reference + - intersectionRect + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/intersectionRect +--- +<div>{{APIRef("Element Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>intersectionRect</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le rectangle de l'élément dans la zone d'affichage (<i>viewport</i>).</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">var <var>rect</var> = PerformanceElementTiming.intersectionRect;</pre> + +<h3>Valeur</h3> +<p>Un objet <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> qui est le rectangle de l'élément dans la zone d'affichage.</p> + +<p>Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément.</p> + +<h2 id="Examples">Exemples</h2> + +<p>Dans cet exemple, l'appel à <code>entry.intersectionRect</code> renvoie un objet <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> avec le rectangle d'affichage de l'image.</p> + +<pre class="brush:html"><img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"></pre> + +<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => { + let <var>entries</var> = list.getEntries().forEach(function (entry) { + if (entry.identifier === "big-image") { + console.log(entry.intersectionRect); + } + }); +}); +observer.observe({ entryTypes: ["element"] });</pre> + +<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> + +<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('Element Timing API','#dom-performanceelementtiming-intersectionrect','PerformanceElementTiming.intersectionRect')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceElementTiming.intersectionRect")}}</p> diff --git a/files/fr/web/api/performanceelementtiming/loadtime/index.html b/files/fr/web/api/performanceelementtiming/loadtime/index.html new file mode 100644 index 0000000000..797edea2d3 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/loadtime/index.html @@ -0,0 +1,62 @@ +--- +title: PerformanceElementTiming.loadTime +slug: Web/API/PerformanceElementTiming/loadTime +tags: + - API + - Property + - Propriété + - Reference + - loadTime + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/loadTime +--- +<div>{{APIRef("Element Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>loadTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie toujours 0 pour le texte. Pour les images, elle renvoie le temps qui est le plus tardif entre le moment où la ressource image est chargée et le moment où elle est attachée à l'élément.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">var <var>loadTime</var> = <var>PerformanceElementTiming</var>.loadTime;</pre> + +<h3>Valeur</h3> +<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le temps de chargement de l'élément.</p> + +<h2 id="Examples">Exemples</h2> + +<p>Dans cet exemple, l'appel à <code>entry.loadTime</code> renvoie le temps de chargement de l'image.</p> + +<pre class="brush:html"><img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"></pre> + +<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => { + let <var>entries</var> = list.getEntries().forEach(function (entry) { + if (entry.identifier === "big-image") { + console.log(entry.loadTime); + } + }); +}); +observer.observe({ entryTypes: ["element"] });</pre> + +<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> + +<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('Element Timing API','#dom-performanceelementtiming-loadtime','PerformanceElementTiming.loadTime')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceElementTiming.loadTime")}}</p> diff --git a/files/fr/web/api/performanceelementtiming/naturalheight/index.html b/files/fr/web/api/performanceelementtiming/naturalheight/index.html new file mode 100644 index 0000000000..ac66fb44ae --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/naturalheight/index.html @@ -0,0 +1,62 @@ +--- +title: PerformanceElementTiming.naturalHeight +slug: Web/API/PerformanceElementTiming/naturalHeight +tags: + - API + - Property + - Propriété + - Reference + - naturalHeight + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/naturalHeight +--- +<div>{{APIRef("Element Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>naturalHeight</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la hauteur intrinsèque de l'élément image.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">var <var>height</var> = PerformanceElementTiming.naturalHeight;</pre> + +<h3>Valeur</h3> +<p>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</p> + +<h2 id="Examples">Exemples</h2> + +<p>Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de <code>entry.naturalHeight</code> renvoie <code>750</code>, c'est-à-dire la hauteur intrinsèque en pixels.</p> + +<pre class="brush:html"><img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"></pre> + +<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => { + let <var>entries</var> = list.getEntries().forEach(function (entry) { + if (entry.identifier === "big-image") { + console.log(entry.naturalHeight); + } + }); +}); +observer.observe({ entryTypes: ["element"] });</pre> + +<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> + +<h2 id="Specifications">Specifications</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('Element Timing API','#dom-performanceelementtiming-naturalheight','PerformanceElementTiming.naturalHeight')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceElementTiming.naturalHeight")}}</p> diff --git a/files/fr/web/api/performanceelementtiming/naturalwidth/index.html b/files/fr/web/api/performanceelementtiming/naturalwidth/index.html new file mode 100644 index 0000000000..e284faba40 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/naturalwidth/index.html @@ -0,0 +1,61 @@ +--- +title: PerformanceElementTiming.naturalWidth +slug: Web/API/PerformanceElementTiming/naturalWidth +tags: + - API + - Property + - Propriété + - Reference + - naturalWidth + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/naturalWidth +--- +<div>{{APIRef("Element Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>naturalWidth</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la largeur intrinsèque de l'élément image.</p> +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:js">var <var>width</var> = <var>PerformanceElementTiming</var>.naturalWidth;</pre> + +<h3>Valeur</h3> +<p>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</p> + +<h2 id="Examples">Exemples</h2> + +<p>Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de <code>entry.naturalWidth</code> renvoie <code>1000</code>, c'est-à-dire la largeur intrinsèque en pixels.</p> + +<pre class="brush:html"><img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"></pre> + +<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => { + let <var>entries</var> = list.getEntries().forEach(function (entry) { + if (entry.identifier === "big-image") { + console.log(entry.naturalWidth); + } + }); +}); +observer.observe({ entryTypes: ["element"] });</pre> + +<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> + +<h2 id="Specifications">Specifications</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('Element Timing API','#dom-performanceelementtiming-naturalwidth','PerformanceElementTiming.naturalWidth')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceElementTiming.naturalWidth")}}</p> diff --git a/files/fr/web/api/performanceelementtiming/rendertime/index.html b/files/fr/web/api/performanceelementtiming/rendertime/index.html new file mode 100644 index 0000000000..5e7d247e5a --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/rendertime/index.html @@ -0,0 +1,66 @@ +--- +title: PerformanceElementTiming.renderTime +slug: Web/API/PerformanceElementTiming/renderTime +tags: + - API + - Property + - Propriété + - Reference + - renderTime + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/renderTime +--- +<div>{{APIRef("Element Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>renderTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le temps écoulé pour le rendu de l'élément associé.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">var <var>renderTime</var> = PerformanceElementTiming.renderTime;</pre> + +<h3>Valeur</h3> +<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le temps de rendu de l'élément.</p> + +<p>Pour les images, il s'agira de l'<strong>horodatage du rendu de l'image</strong>. Ceci est défini comme le moment du rendu suivant le chargement complet de l'image. Si la vérification de l'autorisation de temporisation échoue (comme défini par l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Timing-Allow-Origin">Timing-allow-origin</a>), ceci retournera 0.</p> + +<p>Pour les nœuds de texte, il s'agira de l'<strong>horodatage du rendu du texte</strong>. Ceci est défini comme le moment où l'élément est affiché à l'écran.</p> + +<h2 id="Examples">Exemples</h2> + +<p>Dans cet exemple, appeler <code>entry.renderTime</code> renvoie le temps de rendu de l'élément image.</p> + +<pre class="brush:html"><img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"></pre> + +<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => { + let <var>entries</var> = list.getEntries().forEach(function (entry) { + if (entry.identifier === "big-image") { + console.log(entry.renderTime); + } + }); +}); +observer.observe({ entryTypes: ["element"] });</pre> + +<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> + +<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('Element Timing API','#dom-performanceelementtiming-rendertime','PerformanceElementTiming.renderTime')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceElementTiming.renderTime")}}</p> diff --git a/files/fr/web/api/performanceelementtiming/tojson/index.html b/files/fr/web/api/performanceelementtiming/tojson/index.html new file mode 100644 index 0000000000..6d0ff16b06 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/tojson/index.html @@ -0,0 +1,66 @@ +--- +title: PerformanceElementTiming.toJSON() +slug: Web/API/PerformanceElementTiming/toJSON +tags: + - API + - Method + - Méthode + - Reference + - toJSON() + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/toJSON +--- +<div>{{APIRef("Element Timing API")}}</div> + +<p class="summary">La méthode <strong><code>toJSON()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> est un sérialiseur standard. Elle renvoie une représentation JSON des propriétés de l'objet.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">var <var>json</var> = PerformanceElementTiming.toJSON();</pre> + +<h3 id="Returns">Valeur de retour</h3> + +<dl> + <dt><code>json</code></dt> + <dd>Un objet JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a>.</dd> +</dl> + +<h2 id="Examples">Exemples</h2> + +<p>Dans cet exemple, l'appel de <code>entry.toJSON()</code> renvoie une représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a>, avec les informations sur l'élément image.</p> + +<pre class="brush:html"><img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"></pre> + +<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => { + let <var>entries</var> = list.getEntries().forEach(function (entry) { + if (entry.identifier === "big-image") { + console.log(entry.toJSON()); + } + }); +}); +observer.observe({ entryTypes: ["element"] });</pre> + +<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> + +<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('Element Timing API','#dom-performanceelementtiming-tojson','PerformanceElementTiming.toJson()')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceElementTiming.toJSON")}}</p> diff --git a/files/fr/web/api/performanceelementtiming/url/index.html b/files/fr/web/api/performanceelementtiming/url/index.html new file mode 100644 index 0000000000..ed02583ec0 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/url/index.html @@ -0,0 +1,62 @@ +--- +title: PerformanceElementTiming.url +slug: Web/API/PerformanceElementTiming/url +tags: + - API + - Property + - Propriété + - Reference + - url + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/url +--- +<div>{{APIRef("Element Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>url</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'URL initiale de la demande de ressource lorsque l'élément est une image.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">var <var>url</var> = <var>PerformanceElementTiming</var>.url;</pre> + +<h3>Valeur</h3> +<p>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'URL initiale de la demande de ressources pour les images ou 0 pour le texte.</p> + +<h2 id="Examples">Exemples</h2> + +<p>Dans cet exemple, appeler <code>entry.url</code> renvoie <code>https://example.com/image.jpg</code>.</p> + +<pre class="brush:html"><img src="https://example.com/image.jpg" alt="une belle imahe" elementtiming="big-image" id="myImage"></pre> + +<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => { + let <var>entries</var> = list.getEntries().forEach(function (entry) { + if (entry.identifier === "big-image") { + console.log(entry.url); + } + }); +}); +observer.observe({ entryTypes: ["element"] });</pre> + +<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> + +<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('Element Timing API','#dom-performanceelementtiming-url','PerformanceElementTiming.url')}}</td> + <td>{{Spec2('Element Timing API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceElementTiming.url")}}</p> diff --git a/files/fr/web/api/performanceentry/duration/index.html b/files/fr/web/api/performanceentry/duration/index.html new file mode 100644 index 0000000000..14b9f3e4e7 --- /dev/null +++ b/files/fr/web/api/performanceentry/duration/index.html @@ -0,0 +1,120 @@ +--- +title: PerformanceEntry.duration +slug: Web/API/PerformanceEntry/duration +tags: + - API + - PerformanceEntry + - Property + - Propriété + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry/duration +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">La propriété <strong><code>duration</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui correspond à la durée de l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a>.</p> + +<p>{{AvailableInWorkers}}</p> + +<p>La valeur retournée par cette propriété dépend du <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> de l'entrée de performance :</p> + +<ul> + <li>« <code>frame</code> » - retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> indiquant la différence entre le <code>startTime</code> de deux <i>frames</i> successives.</li> + <li>« <code>mark</code> » - retourne "<code>0</code>" (une marque n'a pas de durée).</li> + <li>« <code>measure</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui correspond à la durée de la mesure.</li> + <li>« <code>navigation</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui est respectivement la différence entre les propriétés <a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd"><code>PerformanceNavigationTiming.loadEventEnd</code></a> et <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a>.</li> + <li>« <code>resource</code> » - renvoie la différence entre les deux <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamps</code></a> <a href="/fr/docs/Web/API/PerformanceResourceTiming/responseEnd"><code>responseEnd</code></a> (le moment de la fin de la réponse) de la ressource et <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a> (le point de départ).</li> +</ul> + +<p>Cette propriété est en {{readonlyInline}}.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js"><em>entry</em>.duration;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la durée de l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a>. Si le concept de durée ne s'applique pas à une mesure de performance particulière, le navigateur peut choisir de renvoyer une durée de 0.</p> + +<div class="notecard note"> + <p><strong>Note :</strong> si l'entrée de performance a un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> "<code>resource</code>" (c'est-à-dire que l'entrée est un objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a>), cette propriété renvoie la différence entre les <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamps</code></a> <a href="/fr/docs/Web/API/PerformanceResourceTiming/responseEnd"><code>PerformanceEntry.responseEnd</code></a> et <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a>.</p> +</div> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant montre l'utilisation de la propriété <code>duration</code>.</p> + +<pre class="brush:js">function run_PerformanceEntry() { + console.log("Support de PerformanceEntry ..."); + + if (performance.mark === undefined) { + console.log("... performance.mark N'est pas pris en charge"); + return; + } + + // Créer quelques entrées de performance via la méthode mark() + performance.mark("Begin"); + do_work(50000); + performance.mark("End"); + + // Utilise getEntries() pour itérer à travers chaque entrée. + let <var>p</var> = performance.getEntries(); + for (let <var>i</var>=0; i < p.length; i++) { + console.log("Entry[" + i + "]"); + check_PerformanceEntry(p[i]); + } +} +function check_PerformanceEntry(<var>obj</var>) { + let <var>properties</var> = ["name", "entryType", "startTime", "duration"]; + let <var>methods</var> = ["toJSON"]; + + for (let <var>i</var>=0; i < properties.length; i++) { + // check each property + let <var>supported</var> = properties[i] in obj; + if (supported) + console.log("..." + properties[i] + " = " + obj[properties[i]]); + else + console.log("..." + properties[i] + " = N'est pas pris en charge"); + } + for (let <var>i</var>=0; i < methods.length; i++) { + // check each method + let <var>supported</var> = typeof obj[methods[i]] == "function"; + if (supported) { + let <var>js</var> = obj[methods[i]](); + console.log("..." + methods[i] + "() = " + JSON.stringify(js)); + } else { + console.log("..." + methods[i] + " = N'est pas pris en charge"); + } + } +} +</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('Performance Timeline Level 2', '#dom-performanceentry-duration', + 'duration')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline', '#dom-performanceentry-duration', + 'duration')}}</td> + <td>{{Spec2('Performance Timeline')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceEntry.duration")}}</p> diff --git a/files/fr/web/api/performanceentry/entrytype/index.html b/files/fr/web/api/performanceentry/entrytype/index.html new file mode 100644 index 0000000000..f2223e82cd --- /dev/null +++ b/files/fr/web/api/performanceentry/entrytype/index.html @@ -0,0 +1,138 @@ +--- +title: PerformanceEntry.entryType +slug: Web/API/PerformanceEntry/entryType +tags: + - API + - Performance Timeline API + - PerformanceEntry + - Property + - Propriété + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry/entryType +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">La propriété <strong><code>entryType</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le type de mesure de performance tel que, par exemple, « <code>mark</code> ». Cette propriété est en lecture seule.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">var <var>type</var> = <var>entry</var>.entryType;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>La valeur de retour dépend du sous-type de l'objet <code>PerformanceEntry</code> et affecte la valeur de la propriété <a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a> comme le montre le tableau ci-dessous.</p> + +<h3 id="Performance_entry_type_names">Noms des types d'entrée de performance</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Valeur</th> + <th scope="col">Sous-type</th> + <th scope="col">Type de propriété pour le nom</th> + <th scope="col">Description de la valeur du nom.</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>element</code></td> + <td><a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a></td> + <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td> + <td>Rapporte le temps de chargement des éléments.</td> + </tr> + <tr> + <td><code>frame</code>, <code>navigation</code></td> + <td><a href="/fr/docs/Web/API/PerformanceFrameTiming"><code>PerformanceFrameTiming</code></a>, + <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a></td> + <td><a href="/fr/docs/Web/API/URL"><code>URL</code></a></td> + <td>L'adresse du document.</td> + </tr> + <tr> + <td><code>resource</code></td> + <td><a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a></td> + <td><a href="/fr/docs/Web/API/URL"><code>URL</code></a></td> + <td>L'URL résolue de la ressource demandée. Cette valeur ne change pas même si la demande est redirigée.</td> + </tr> + <tr> + <td><code>mark</code></td> + <td><a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a></td> + <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td> + <td>Le nom utilisé lorsque la marque a été créée en appelant <a href="/fr/docs/Web/API/Performance/mark"><code>mark()</code></a>.</td> + </tr> + <tr> + <td><code>measure</code></td> + <td><a href="/fr/docs/Web/API/PerformanceMeasure"><code>PerformanceMeasure</code></a></td> + <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td> + <td>Le nom utilisé lorsque la mesure a été créée en appelant <a href="/fr/docs/Web/API/Performance/measure"><code>measure()</code></a>.</td> + </tr> + <tr> + <td><code>paint</code></td> + <td><a href="/fr/docs/Web/API/PerformancePaintTiming"><code>PerformancePaintTiming</code></a></td> + <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td> + <td>Soit <code>'first-paint'</code> ou <code>'first-contentful-paint'</code>.</td> + </tr> + <tr> + <td><code>longtask</code></td> + <td><a href="/fr/docs/Web/API/PerformanceLongTaskTiming"><code>PerformanceLongTaskTiming</code></a></td> + <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td> + <td>Signale les cas de tâches longues.</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant montre l'utilisation de la propriété <code>entryType</code>.</p> + +<pre class="brush: js">function run_PerformanceEntry() { + + // Vérifie le support des fonctionnalités avant de continuer + if (performance.mark === undefined) { + console.log("performance.mark n'est pas pris en charge"); + return; + } + + // Crée une entrée de performance nommée "begin" via la méthode mark() + performance.mark("begin"); + + // Vérifie le type d'entrée de toutes les entrées "begin". + let entriesNamedBegin = performance.getEntriesByName("begin"); + for (let i=0; i < entriesNamedBegin.length; i++) { + let typeOfEntry = entriesNamedBegin[i].entryType; + console.log("L'entrée est de type : " + typeOfEntry); + } +} +</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('Performance Timeline Level 2', '#dom-performanceentry-entrytype', + 'entryType')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline', '#dom-performanceentry-entrytype', + 'entryType')}}</td> + <td>{{Spec2('Performance Timeline')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceEntry.entryType")}}</p> diff --git a/files/fr/web/api/performanceentry/index.html b/files/fr/web/api/performanceentry/index.html new file mode 100644 index 0000000000..1e7ef376ea --- /dev/null +++ b/files/fr/web/api/performanceentry/index.html @@ -0,0 +1,147 @@ +--- +title: PerformanceEntry +slug: Web/API/PerformanceEntry +tags: + - API + - Interface + - Performance Timeline API + - PerformanceEntry + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">L'objet <strong><code>PerformanceEntry</code></strong> encapsule une seule mesure de performance qui fait partie de la <em>chronologie de performance</em>. Une <em>entrée de performance</em> peut être créée directement en faisant <em><a href="/fr/docs/Web/API/PerformanceMark">une marque</a></em> ou <em><a href="/fr/docs/Web/API/PerformanceMeasure">une mesure</a></em> (par exemple en appelant la méthode <a href="/fr/docs/Web/API/Performance/mark"><code>mark()</code></a>) à un point explicite d'une application. Les entrées de performance sont également créées de manière indirecte, par exemple en chargeant une ressource (telle qu'une image).</p> + +<p>Les instances <code>PerformanceEntry</code> auront toujours l'un des sous-types suivants :</p> + +<ul> + <li><a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a></li> + <li><a href="/fr/docs/Web/API/PerformanceMeasure"><code>PerformanceMeasure</code></a></li> + <li><a href="/fr/docs/Web/API/PerformanceFrameTiming"><code>PerformanceFrameTiming</code></a></li> + <li><a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a></li> + <li><a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a></li> + <li><a href="/fr/docs/Web/API/PerformancePaintTiming"><code>PerformancePaintTiming</code></a></li> +</ul> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Properties">Propriétés</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a> {{readonlyInline}}</dt> + <dd>Une valeur qui précise davantage la valeur renvoyée par la propriété <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>. La valeur des deux dépend du sous-type. Voir la page de la propriété pour les valeurs valides.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> {{readonlyInline}}</dt> + <dd>Une chaîne de caractère <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le type de mesure de performance comme, par exemple, "<code>mark</code>". Voir la page des propriétés pour les valeurs valides.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a> {{readonlyInline}}</dt> + <dd>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure de départ de la mesure de performance.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a> {{readonlyInline}}</dt> + <dd>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle de la durée de l'événement de performance.</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/toJSON"><code>PerformanceEntry.toJSON()</code></a></dt> + <dd>Renvoie une représentation JSON de l'objet <code>PerformanceEntry</code>.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant vérifie toutes les propriétés <code>PerformanceEntry</code> pour voir si le navigateur les prend en charge et, le cas échéant, écrit leurs valeurs dans la console.</p> + +<pre class="brush:js">function print_PerformanceEntries() { + // Utilise getEntries() pour obtenir une liste de toutes les entrées de performance. + let p = performance.getEntries(); + for (let i = 0; i < p.length; i++) { + console.log("PerformanceEntry[" + i + "]"); + print_PerformanceEntry(p[i]); + } +} +function print_PerformanceEntry(perfEntry) { + let properties = ["name", + "entryType", + "startTime", + "duration"]; + + for (let i = 0; i < properties.length; i++) { + // Vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " n'est PAS pris en charge"); + } + } +} +</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('Resource Timing 3')}}</td> + <td>{{Spec2('Resource Timing 3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Resource Timing 2')}}</td> + <td>{{Spec2('Resource Timing 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Resource Timing')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Ajoute l'interface <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a> et la valeur <code>resource</code> pour <code>entryType</code>.</td> + </tr> + <tr> + <td>{{SpecName('Navigation Timing Level 2')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Navigation Timing')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Ajoute l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> et la valeur <code>navigation</code> pour <code>entryType</code>.</td> + </tr> + <tr> + <td>{{SpecName('User Timing Level 2')}}</td> + <td>{{Spec2('User Timing Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('User Timing')}}</td> + <td>{{Spec2('User Timing')}}</td> + <td>Ajoute les interfaces <a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a> et <a href="/fr/docs/Web/API/PerformanceMeasure"><code>PerformanceMeasure</code></a> ainsi que les valeurs <code>mark</code> et <code>measure</code> pour <code>entryType</code>.</td> + </tr> + <tr> + <td>{{SpecName('Frame Timing')}}</td> + <td>{{Spec2('Frame Timing')}}</td> + <td>Ajoute l'interface <a href="/fr/docs/Web/API/PerformanceFrameTiming"><code>PerformanceFrameTiming</code></a> et la valeur <code>frame</code> pour <code>entryType</code>.</td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline Level 2', '#dom-performanceentry', 'PerformanceEntry')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Ajout de la méthode de sérialisation <code>toJSON()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline', '#dom-performanceentry', 'PerformanceEntry')}}</td> + <td>{{Spec2('Performance Timeline')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceEntry")}}</p> diff --git a/files/fr/web/api/performanceentry/name/index.html b/files/fr/web/api/performanceentry/name/index.html new file mode 100644 index 0000000000..1683f51f51 --- /dev/null +++ b/files/fr/web/api/performanceentry/name/index.html @@ -0,0 +1,150 @@ +--- +title: PerformanceEntry.name +slug: Web/API/PerformanceEntry/name +tags: + - API + - Performance Timeline API + - PerformanceEntry + - Property + - Propriété + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry/name +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">La propriété <strong><code>name</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> renvoie une valeur qui précise davantage la valeur renvoyée par la propriété <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>. Cette propriété est en lecture seule.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">var <var>name</var> = <var>entry</var>.name; +</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>La valeur de retour dépend du sous-type de l'objet <code>PerformanceEntry</code> et de la valeur de <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>, comme le montre le tableau ci-dessous.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Type de valeur pour <code>name</code></th> + <th scope="col">Sous-type</th> + <th scope="col">Type (<code>entryType</code>)</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/API/URL"><code>URL</code></a></td> + <td><a href="/fr/docs/Web/API/PerformanceFrameTiming"><code>PerformanceFrameTiming</code></a>, + <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a></td> + <td><code>frame</code>, <code>navigation</code></td> + <td>L'adresse du document.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/URL"><code>URL</code></a></td> + <td><a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a></td> + <td><code>resource</code></td> + <td>L'URL résolue de la ressource demandée. Cette valeur ne change pas même si la demande est redirigée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td> + <td><a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a></td> + <td><code>mark</code></td> + <td>Le nom utilisé lorsque le marqueur a été créé en appelant <a href="/fr/docs/Web/API/Performance/mark"><code>mark()</code></a>.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td> + <td><a href="/fr/docs/Web/API/PerformanceMeasure"><code>PerformanceMeasure</code></a></td> + <td><code>measure</code></td> + <td>Le nom utilisé lorsque la mesure a été créée en appelant <a href="/fr/docs/Web/API/Performance/measure"><code>measure()</code></a>.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td> + <td><a href="/fr/docs/Web/API/PerformancePaintTiming"><code>PerformancePaintTiming</code></a></td> + <td><code>paint</code></td> + <td>Soit <code>'first-paint'</code> ou <code>'first-contentful-paint'</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant montre l'utilisation de la propriété <code>name</code>.</p> + +<pre class="brush: js">function run_PerformanceEntry() { + console.log("Support de PerformanceEntry ..."); + + if (performance.mark === undefined) { + console.log("... performance.mark n'est pas pris en charge"); + return; + } + + // Crée quelques entrées de performance via la méthode mark() + performance.mark("Begin"); + do_work(50000); + performance.mark("End"); + + // Utilise getEntries() pour itérer à travers chaque entrée. + let p = performance.getEntries(); + for (let i = 0; i < p.length; i++) { + console.log("Entry[" + i + "]"); + check_PerformanceEntry(p[i]); + } +} +function check_PerformanceEntry(obj) { + let properties = ["name", "entryType", "startTime", "duration"]; + let methods = ["toJSON"]; + + for (let i = 0; i < properties.length; i++) { + // Vérifie chaque propriété + let supported = properties[i] in obj; + if (supported) + console.log("..." + properties[i] + " = " + obj[properties[i]]); + else + console.log("..." + properties[i] + " = Not supported"); + } + for (let i = 0; i < methods.length; i++) { + // Vérifie chaque méthode + let supported = typeof obj[methods[i]] == "function"; + if (supported) { + let js = obj[methods[i]](); + console.log("..." + methods[i] + "() = " + JSON.stringify(js)); + } else { + console.log("..." + methods[i] + " = Not supported"); + } + } +} +</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('Performance Timeline Level 2', '#dom-performanceentry-name', + 'name')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline', '#dom-performanceentry-name', + 'name')}}</td> + <td>{{Spec2('Performance Timeline')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceEntry.name")}}</p> diff --git a/files/fr/web/api/performanceentry/starttime/index.html b/files/fr/web/api/performanceentry/starttime/index.html new file mode 100644 index 0000000000..864d4ac068 --- /dev/null +++ b/files/fr/web/api/performanceentry/starttime/index.html @@ -0,0 +1,122 @@ +--- +title: PerformanceEntry.startTime +slug: Web/API/PerformanceEntry/startTime +tags: + - API + - Performance Timeline API + - PerformanceEntry + - Property + - Propriété + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry/startTime +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">La propriété <strong><code>startTime</code></strong> renvoie le premier <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> enregistré pour l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a>.</p> + +<p>{{AvailableInWorkers}}</p> + +<p>La valeur renvoyée par cette propriété dépend du <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>type</code></a> de l'entrée de performance :</p> + +<ul> + <li>« <code>frame</code> » - retourne le + <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> quand l'affichage a été démarré.</li> + <li>« <code>mark</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> lorsque le marquage a été créé par un appel de <a href="/fr/docs/Web/API/Performance/mark"><code>performance.mark()</code></a>.</li> + <li>« <code>measure</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> lorsque la mesure a été créée par un appel à <a href="/fr/docs/Web/API/Performance/measure"><code>performance.measure()</code></a>.</li> + <li>« <code>navigation</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> avec une valeur de "<code>0</code>".</li> + <li>« <code>resource</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne <a href="/fr/docs/Web/API/PerformanceResourceTiming/fetchStart">commence à récupérer la ressource</a>.</li> +</ul> + +<p>Cette propriété est en lecture seule.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">entry.startTime;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant le premier horodatage lorsque l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a> a été créée.</p> + +<div class="notecard note"> + <p><strong>Note :</strong> Si l'entrée de performance a un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> "<code>resource</code>" (c'est-à-dire que l'entrée est un objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a>), cette propriété renvoie la valeur de l'horodatage fournie par <a href="/fr/docs/Web/API/PerformanceResourceTiming/fetchStart"><code>PerformanceResourceTiming.fetchStart</code></a>.</p> +</div> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant montre l'utilisation de la propriété <code>startTime</code>.</p> + +<pre class="brush:js">function run_PerformanceEntry() { + console.log("Support de PerformanceEntry ..."); + + if (performance.mark === undefined) { + console.log("... performance.mark n'est pas pris en charge"); + return; + } + + // Crée quelques entrées de performance via la méthode mark() + performance.mark("Begin"); + do_work(50000); + performance.mark("End"); + + // Utilise getEntries() pour itérer à travers chaque entrée + let p = performance.getEntries(); + for (let i = 0; i < p.length; i++) { + log("Entry[" + i + "]"); + check_PerformanceEntry(p[i]); + } +} +function check_PerformanceEntry(obj) { + let properties = ["name", "entryType", "startTime", "duration"]; + let methods = ["toJSON"]; + + for (let i = 0; i < properties.length; i++) { + // On vérifie chaque propriété + let supported = properties[i] in obj; + if (supported) + log("..." + properties[i] + " = " + obj[properties[i]]); + else + log("..." + properties[i] + " = N'est pas pris en charge"); + } + for (let i = 0; i < methods.length; i++) { + // On vérifie chaque méthode + let supported = typeof obj[methods[i]] == "function"; + if (supported) { + let js = obj[methods[i]](); + log("..." + methods[i] + "() = " + JSON.stringify(js)); + } else { + log("..." + methods[i] + " = N'est pas pris en charge"); + } + } +} +</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('Performance Timeline Level 2', '#dom-performanceentry-starttime', + 'startTime')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline', '#dom-performanceentry-starttime', + 'startTime')}}</td> + <td>{{Spec2('Performance Timeline')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceEntry.startTime")}}</p> diff --git a/files/fr/web/api/performanceentry/tojson/index.html b/files/fr/web/api/performanceentry/tojson/index.html new file mode 100644 index 0000000000..13a8c3bb5e --- /dev/null +++ b/files/fr/web/api/performanceentry/tojson/index.html @@ -0,0 +1,107 @@ +--- +title: PerformanceEntry.toJSON() +slug: Web/API/PerformanceEntry/toJSON +tags: + - API + - Method + - Méthode + - Performance Timeline API + - PerformanceEntry + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry/toJSON +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">La méthode <strong><code>toJSON()</code></strong> permet de sérialiser l'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> courant et renvoie une représentation JSON de l'objet.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">let jsonObj = perfEntry.toJSON(); +</pre> + +<h3 id="Arguments">Arguments</h3> + +<p>Aucun.</p> + +<h3 id="Return_value">Valeur de retour</h3> + +<dl> + <dt><code>json</code></dt> + <dd>Un objet JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a>.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant montre l'utilisation de la méthode <code>toJSON()</code>.</p> + +<pre class="brush:js">function run_PerformanceEntry() { + console.log("Support de PerformanceEntry ..."); + + if (performance.mark === undefined) { + console.log("... performance.mark n'est pas pris en charge"); + return; + } + + // Crée quelques entrées de performance via la méthode mark() + performance.mark("Begin"); + do_work(50000); + performance.mark("End"); + + // Utilise getEntries() pour itérer à travers chaque entrée. + let p = performance.getEntries(); + for (let i = 0; i < p.length; i++) { + console.log("Entry[" + i + "]"); + check_PerformanceEntry(p[i]); + } +} +function check_PerformanceEntry(obj) { + let properties = ["name", "entryType", "startTime", "duration"]; + let methods = ["toJSON"]; + + for (let i = 0; i < properties.length; i++) { + // On vérifie chaque propriété + let supported = properties[i] in obj; + if (supported) + console.log("..." + properties[i] + " = " + obj[properties[i]]); + else + console.log("..." + properties[i] + " = N'est pas pris en charge"); + } + for (let i = 0; i < methods.length; i++) { + // On vérifie chaque méthode + let supported = typeof obj[methods[i]] == "function"; + if (supported) { + let js = obj[methods[i]](); + console.log("..." + methods[i] + "() = " + JSON.stringify(js)); + } else { + console.log("..." + methods[i] + " = N'est pas pris en charge"); + } + } +} +</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('Performance Timeline Level 2', '#dom-performanceentry-tojson', + 'toJSON')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Définition initiale de la méthode <code>toJSON()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceEntry.toJSON")}}</p> diff --git a/files/fr/web/api/performanceeventtiming/index.html b/files/fr/web/api/performanceeventtiming/index.html new file mode 100644 index 0000000000..083b200b42 --- /dev/null +++ b/files/fr/web/api/performanceeventtiming/index.html @@ -0,0 +1,170 @@ +--- +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 class="summary">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> + +<div class="index"> + <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> +</div> + +<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> diff --git a/files/fr/web/api/performanceframetiming/index.html b/files/fr/web/api/performanceframetiming/index.html new file mode 100644 index 0000000000..118c7296ff --- /dev/null +++ b/files/fr/web/api/performanceframetiming/index.html @@ -0,0 +1,75 @@ +--- +title: PerformanceFrameTiming +slug: Web/API/PerformanceFrameTiming +tags: + - API + - Frame Timing API + - Interface + - Performance Timeline API + - PerformanceFrameTiming + - Reference + - Performance Web +translation_of: Web/API/PerformanceFrameTiming +--- +<div>{{SeeCompatTable}}{{APIRef("Frame Timing API")}}</div> + +<p class="summary"><strong><code>PerformanceFrameTiming</code></strong> est une interface <em>abstraite</em> qui fournit des données d'horodatage de « <em>frame</em> » pour la boucle d'événements du navigateur. Une « <em>frame</em> » représente la quantité de travail qu'un navigateur effectue dans <a href="https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8">une itération de la boucle d'événements</a>, comme le traitement des événements DOM, le redimensionnement, le défilement, le rendu, les animations CSS, etc. Un <i>frame rate</i> de 60fps (images par seconde) pour un taux de rafraîchissement de 60Hz est l'objectif pour une expérience utilisateur réactive. Cela signifie que le navigateur doit traiter une image en environ 16,7 ms.</p> + +<p>Une application peut enregistrer un <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour une « <code>frame</code> » de <a href="/fr/docs/Web/API/PerformanceEntry">l'entrée de performance</a> et l'observateur peut récupérer des données sur la durée de chaque événement. Ces informations peuvent être utilisées pour aider à identifier les choses qui consomment trop de temps pour offrir une bonne expérience utilisateur.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Propriétés</h2> + +<p>Cette interface n'a pas de propriétés mais elle étend les propriétés de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes (c'est-à-dire quand le type de <a href="/fr/docs/Web/API/PerformanceEntry">l'entrée de performance</a> vaut « <code>frame</code> ») en restreignant les propriétés comme suit :</p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a></dt> + <dd>Retourne « <code>frame</code> ».</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a></dt> + <dd>Renvoie l'adresse du <a href="https://dom.spec.whatwg.org/#concept-document-url">document</a>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a></dt> + <dd>Retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> (moment) où le cadre a été lancé.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a></dt> + <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> indiquant la différence entre le <code>startTime</code> de deux images successives.</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<p>Cette interface n'a pas de méthodes.</p> + +<h2 id="Example">Exemple</h2> + +<p>Voir l'exemple dans l'article <a href="/fr/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Utilisation de l'API Frame Timing</a>.</p> + +<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('Frame Timing', '#performanceframetiming-interface', 'PerformanceFrameTiming')}}</td> + <td>{{Spec2('Frame Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceFrameTiming")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a></li> + <li><a href="/fr/docs/Tools/Performance/Frame_rate">Frame Rate (Firefox Performance Tool)</a></li> + <li><a href="/fr/docs/Web/API/Frame_Timing">L'API <i>Frame Timing</i></a></li> + <li><a href="/fr/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Utiliser l'API Frame Timing</a></li> +</ul> diff --git a/files/fr/web/api/performancelongtasktiming/attribution/index.html b/files/fr/web/api/performancelongtasktiming/attribution/index.html new file mode 100644 index 0000000000..c3e9c82ff3 --- /dev/null +++ b/files/fr/web/api/performancelongtasktiming/attribution/index.html @@ -0,0 +1,46 @@ +--- +title: PerformanceLongTaskTiming.attribution +slug: Web/API/PerformanceLongTaskTiming/attribution +tags: + - API + - Long Tasks API + - PerformanceLongTaskTiming + - Property + - Propriété + - Reference +translation_of: Web/API/PerformanceLongTaskTiming/attribution +--- +<p>{{SeeCompatTable}}{{APIRef("Long Tasks")}}</p> + +<p>La propriété en lecture seule <strong><code>attribution</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceLongTaskTiming"><code>PerformanceLongTaskTiming</code></a> retourne une séquence d'instances <a href="/fr/docs/Web/API/TaskAttributionTiming"><code>TaskAttributionTiming</code></a>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">var <var>taskAttributeTiming</var> = PerformanceLongTaskTiming.attribution;</pre> + +<h3 id="Value">Valeur</h3> + +<p>Une séquence d'instances <a href="/fr/docs/Web/API/TaskAttributionTiming"><code>TaskAttributionTiming</code></a>.</p> + +<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('Long Tasks','#dom-performancelongtasktiming-attribution','attribution')}}</td> + <td>{{Spec2('Long Tasks')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceLongTaskTiming.attribution")}}</p> diff --git a/files/fr/web/api/performancelongtasktiming/index.html b/files/fr/web/api/performancelongtasktiming/index.html new file mode 100644 index 0000000000..2066469ef5 --- /dev/null +++ b/files/fr/web/api/performancelongtasktiming/index.html @@ -0,0 +1,46 @@ +--- +title: PerformanceLongTaskTiming +slug: Web/API/PerformanceLongTaskTiming +tags: + - API + - Interface + - Long Tasks API + - PerformanceLongTaskTiming + - Reference +translation_of: Web/API/PerformanceLongTaskTiming +--- +<p>{{SeeCompatTable}}{{APIRef("Long Tasks")}}</p> + +<p>L'interface <strong><code>PerformanceLongTaskTiming</code></strong> de <a href="/fr/docs/Web/API/Long_Tasks_API">l'API <i>Long Tasks</i></a> signale les instances de tâches longues.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Propriétés</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceLongTaskTiming"><code>PerformanceLongTaskTiming</code></a> <em>lecture seule</em> {{ExperimentalBadge}}</dt> + <dd>Retourne une séquence d'instances <a href="/fr/docs/Web/API/TaskAttributionTiming"><code>TaskAttributionTiming</code></a>.</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('Long Tasks','#sec-PerformanceLongTaskTiming','PerformanceLongTaskTiming')}}</td> + <td>{{Spec2('Long Tasks')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceLongTaskTiming")}}</p> diff --git a/files/fr/web/api/performancemark/index.html b/files/fr/web/api/performancemark/index.html new file mode 100644 index 0000000000..d258deec2b --- /dev/null +++ b/files/fr/web/api/performancemark/index.html @@ -0,0 +1,76 @@ +--- +title: PerformanceMark +slug: Web/API/PerformanceMark +tags: + - API + - Interface + - Performance Timing API + - Reference + - Performance Web +translation_of: Web/API/PerformanceMark +--- +<div>{{APIRef("User Timing API")}}</div> + +<p class="summary"><code><strong>PerformanceMark</strong></code> est une interface <em>abstraite</em> pour les objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> avec un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> « <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> <em>nommé</em> (le <em>marqueur</em>) à la <em>chronologie des performances</em> du navigateur.</p> + +<p>{{InheritanceDiagram}}</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Properties">Propriétés</h2> + +<p>Cette interface n'a pas de propriété mais elle étend les propriétés de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes en restreignant les propriétés comme suit :</p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a></dt> + <dd>Retourne « <code>mark</code> ».</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a></dt> + <dd>Retourne le nom donné au marqueur lorsqu'il a été créé via un appel de <a href="/fr/docs/Web/API/Performance/mark"><code>performance.mark()</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a></dt> + <dd>Retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> à partir du moment où <a href="/fr/docs/Web/API/Performance/mark"><code>performance.mark()</code></a> a été appelé.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a></dt> + <dd>Retourne « <code>0</code> ». (Un marqueur n'a pas de <em>durée</em>.)</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<p>Cette interface n'a pas de méthodes.</p> + +<h2 id="Example">Exemple</h2> + +<p>Voir l'exemple dans <a href="/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Utilisation de l'API User Timing</a>.</p> + +<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('User Timing Level 2', '#performancemark', 'PerformanceMark')}}</td> + <td>{{Spec2('User Timing Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('User Timing', '#performancemark', 'PerformanceMark')}}</td> + <td>{{Spec2('User Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceMark")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/User_Timing_API">API <i>User Timing</i></a></li> + <li><a href="/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Utilisation de l'API <i>User Timing</i></a></li> +</ul> diff --git a/files/fr/web/api/performancemeasure/index.html b/files/fr/web/api/performancemeasure/index.html new file mode 100644 index 0000000000..4881a14b70 --- /dev/null +++ b/files/fr/web/api/performancemeasure/index.html @@ -0,0 +1,76 @@ +--- +title: PerformanceMeasure +slug: Web/API/PerformanceMeasure +tags: + - API + - Interface + - Performance Timeline API + - Reference + - Performance Web +translation_of: Web/API/PerformanceMeasure +--- +<div>{{APIRef("User Timing API")}}</div> + +<p class="summary"><code><strong>PerformanceMeasure</strong></code> est une interface <em>abstraite</em> pour les objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> ayant un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> « <code>measure</code> ». Les entrées de ce type sont créées en appelant <a href="/fr/docs/Web/API/Performance/measure"><code>measure()</code></a> pour ajouter un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> <em>nommé</em> (la <em>mesure</em>) entre deux <em>marqueurs</em> à la <em>chronologie des performances</em> du navigateur.</p> + +<p>{{InheritanceDiagram}}</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Properties">Propriétés</h2> + +<p>Cette interface n'a pas de propriété mais elle étend les propriétés de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes en restreignant les propriétés comme suit :</p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceEntry.entryType"><code>PerformanceEntry.entryType</code></a></dt> + <dd>Retourne « <code>measure</code> ».</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry.name"><code>PerformanceEntry.name</code></a></dt> + <dd>Retourne le nom donné à la mesure lorsqu'elle a été créée via un appel à <a href="/fr/docs/Web/API/Performance/measure()"><code>performance.measure()</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry.startTime"><code>PerformanceEntry.startTime</code></a></dt> + <dd>Retourne un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> associé à la mesure indiquant le moment où <a href="/fr/docs/Web/API/Performance/measure()"><code>performance.measure()</code></a> a été appelée.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry.duration"><code>PerformanceEntry.duration</code></a></dt> + <dd>Retourne un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> correspondant à la durée de la mesure (généralement, l'horodatage de fin de la mesure moins l'horodatage de début).</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<p>Cette interface n'a pas de méthode.</p> + +<h2 id="Example">Exemple</h2> + +<p>Voir l'exemple dans : <a href="/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Utilisation de l'API <i>User Timing</i></a>.</p> + +<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('User Timing Level 2', '#dom-performance-measure', 'PerformanceMeasure')}}</td> + <td>{{Spec2('User Timing Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('User Timing', '#performancemeasure', 'PerformanceMeasure')}}</td> + <td>{{Spec2('User Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceMeasure")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/User_Timing_API">API <i>User Timing </i></a></li> + <li><a href="/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Utilisation de l'API <i>User Timing</i></a></li> +</ul> diff --git a/files/fr/web/api/performancenavigation/index.html b/files/fr/web/api/performancenavigation/index.html new file mode 100644 index 0000000000..afb5a5d7d9 --- /dev/null +++ b/files/fr/web/api/performancenavigation/index.html @@ -0,0 +1,87 @@ +--- +title: PerformanceNavigation +slug: Web/API/PerformanceNavigation +tags: + - API + - Backwards compatibility + - Deprecated + - Déprécié + - Interface + - Navigation Timing + - Navigation Timing API + - Performance + - PerformanceNavigation + - Reference + - Timing +translation_of: Web/API/PerformanceNavigation +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p>L'ancienne interface <strong><code>PerformanceNavigation</code></strong> représente des informations sur la façon dont la navigation vers le document actuel a été effectuée.</p> + +<p>Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule <a href="/fr/docs/Web/API/Performance/navigation"><code>Performance.navigation</code></a>.</p> + +<h2 id="Properties">Propriétés</h2> + +<p><em>L'interface <code>PerformanceNavigation</code> n'hérite d'aucune propriété.</em></p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceNavigation/type"><code>PerformanceNavigation.type</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Une valeur <code>unsigned short</code> qui indique comment la navigation vers cette page s'est faite. Les valeurs possibles sont : + <dl> + <dt><code>TYPE_NAVIGATE</code> (0)</dt> + <dd>La page a été consultée en suivant un lien, un signet, un formulaire ou un script, ou en tapant l'URL dans la barre d'adresse.</dd> + <dt><code>TYPE_RELOAD</code> (1)</dt> + <dd>L'accès à la page s'est fait en cliquant sur le bouton Recharger ou via la méthode <a href="/fr/docs/Web/API/Location/reload"><code>Location.reload()</code></a>.</dd> + <dt><code>TYPE_BACK_FORWARD</code> (2)</dt> + <dd>On a accédé à cette page en naviguant dans l'historique.</dd> + <dt><code>TYPE_RESERVED</code> (255)</dt> + <dd>De n'importe quelle autre manière.</dd> + </dl> + </dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigation/redirectCount"><code>PerformanceNavigation.redirectCount</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Un <code>unsigned short</code> représentant le nombre de <strong>Redirections</strong> effectués avant d'atteindre la page.</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<p><em>L'interface <code>Performance</code> n'hérite d'aucune méthode.</em></p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceNavigation/toJSON"><code>PerformanceNavigation.toJSON()</code></a> {{deprecated_inline}}</dt> + <dd>Un sérialiseur renvoyant un objet json représentant l'objet <code>PerformanceNavigation</code>.</dd> +</dl> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécifications</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Navigation Timing', '#performancenavigation', 'PerformanceNavigation')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigation")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> qui permet d'accéder à un objet de ce type.</li> + <li><a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> (fait partie de Navigation Timing Level 2) {{experimental_inline}}</li> +</ul> diff --git a/files/fr/web/api/performancenavigation/redirectcount/index.html b/files/fr/web/api/performancenavigation/redirectcount/index.html new file mode 100644 index 0000000000..8316baaf34 --- /dev/null +++ b/files/fr/web/api/performancenavigation/redirectcount/index.html @@ -0,0 +1,58 @@ +--- +title: PerformanceNavigation.redirectCount +slug: Web/API/PerformanceNavigation/redirectCount +tags: + - API + - Backwards compatibility + - Deprecated + - Déprécié + - HTML + - Navigation Timing + - PerformanceNavigation + - Property + - Propriété + - Read-only + - Héritage +translation_of: Web/API/PerformanceNavigation/redirectCount +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/redirectCount"><code>PerformanceNavigationTiming.redirectCount</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p>L'ancienne propriété en lecture seule <code><strong>PerformanceNavigation.redirectCount</code></strong> renvoie un <code>unsigned short</code> représentant le nombre de <strong>Redirections</strong> effectués avant d'atteindre la page.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">let <var>amount</var> = performanceNavigation.redirectCount;</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécifications</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Navigation Timing', '#dom-performancenavigation-redirectcount', + 'PerformanceNavigation.redirectCount')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigation.redirectCount")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceNavigation"><code>PerformanceNavigation</code></a> à laquelle il appartient.</li> +</ul> diff --git a/files/fr/web/api/performancenavigation/type/index.html b/files/fr/web/api/performancenavigation/type/index.html new file mode 100644 index 0000000000..14fc86b915 --- /dev/null +++ b/files/fr/web/api/performancenavigation/type/index.html @@ -0,0 +1,89 @@ +--- +title: PerformanceNavigation.type +slug: Web/API/PerformanceNavigation/type +tags: + - API + - Backwards compatibility + - Deprecated + - Déprécié + - Navigation Timing + - PerformanceNavigation + - Property + - Propriété + - Read-only + - Héritage +translation_of: Web/API/PerformanceNavigation/type +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/type"><code>PerformanceNavigationTiming.type</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p>L'ancienne propriété <code><strong>PerformanceNavigation.type</code></strong> en lecture seule renvoie un <code>unsigned short</code> contenant une constante décrivant comment la navigation vers cette page a été effectuée. Les valeurs possibles sont :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Valeur</th> + <th scope="col">Nom de la constante</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>0</code></td> + <td><code>TYPE_NAVIGATE</code></td> + <td>La page a été consultée en suivant un lien, un signet, un formulaire, un script ou en tapant l'URL dans la barre d'adresse.</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>TYPE_RELOAD</code></td> + <td>La page a été consultée en cliquant sur le bouton Recharger ou via la méthode <a href="/fr/docs/Web/API/Location/reload"><code>Location.reload()</code></a>.</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>TYPE_BACK_FORWARD</code></td> + <td>La page a été consultée en naviguant dans l'historique.</td> + </tr> + <tr> + <td><code>255</code></td> + <td><code>TYPE_RESERVED</code></td> + <td>De toute autre manière.</td> + </tr> + </tbody> +</table> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">let <var>type</var> = performanceNavigation.type;</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécifications</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Navigation Timing', '#dom-performancenavigation-type', + 'PerformanceNavigation.type')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigation.type")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceNavigation"><code>PerformanceNavigation</code></a> à laquelle il appartient.</li> +</ul> diff --git a/files/fr/web/api/performancenavigationtiming/domcomplete/index.html b/files/fr/web/api/performancenavigationtiming/domcomplete/index.html new file mode 100644 index 0000000000..4a6d70c7ca --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/domcomplete/index.html @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.domComplete +slug: Web/API/PerformanceNavigationTiming/domComplete +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/domComplete +--- +<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>domComplete</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à <code><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">complete</a></code>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">perfEntry.domComplete;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant une valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à <code><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">complete</a></code>.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant illustre l'utilisation de cette propriété.</p> + +<pre class="brush:js">function print_nav_timing_data() { + // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation". + let perfEntries = performance.getEntriesByType("navigation"); + + for (let i = 0; i < perfEntries.length; i++) { + console.log("= Entrée de navigation : entry[" + i + "]"); + let p = perfEntries[i]; + // propriétés du DOM + console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart)); + console.log("Contenu du DOM complet = " + p.domComplete); + console.log("Contenu du DOM interactif = " + p.interactive); + + // temps de chargement et de déchargement des documents + console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart)); + console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart)); + + // autres propriétés + console.log("type = " + p.type); + console.log("redirectCount = " + p.redirectCount); + } +} +</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('Navigation Timing Level 2', + '#dom-performancenavigationtiming-domcomplete', 'domComplete')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming.domComplete")}}</p> diff --git a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.html b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.html new file mode 100644 index 0000000000..e9f37b8720 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.html @@ -0,0 +1,75 @@ +--- +title: PerformanceNavigationTiming.domContentLoadedEventEnd +slug: Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd +--- +<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>domContentLoadedEventEnd</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a> du document actuel.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js"><var>perfEntry</var>.domContentLoadedEventEnd;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a> du document actuel.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant illustre l'utilisation de cette propriété.</p> + +<pre class="brush:js">function print_nav_timing_data() { + // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation". + let perfEntries = performance.getEntriesByType("navigation"); + + for (let i = 0; i < perfEntries.length; i++) { + console.log("= Entrée de navigation : entry[" + i + "]"); + let p = perfEntries[i]; + // propriétés du DOM + console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart)); + console.log("Contenu du DOM complet = " + p.domComplete); + console.log("Contenu du DOM interactif = " + p.interactive); + + // temps de chargement et de déchargement des documents + console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart)); + console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart)); + + // autres propriétés + console.log("type = " + p.type); + console.log("redirectCount = " + p.redirectCount); + } +} +</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('Navigation Timing Level 2', + '#dom-performancenavigationtiming-domcontentloadedeventend', + 'domContentLoadedEventEnd')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming.domContentLoadedEventEnd")}}</p> diff --git a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.html b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.html new file mode 100644 index 0000000000..88e1459fbb --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.html @@ -0,0 +1,75 @@ +--- +title: PerformanceNavigationTiming.domContentLoadedEventStart +slug: Web/API/PerformanceNavigationTiming/domContentLoadedEventStart +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/domContentLoadedEventStart +--- +<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>domContentLoadedEventStart</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a> du document actuel.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js"><var>perfEntry</var>.domContentLoadedEventStart;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a> du document actuel.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant illustre l'utilisation de cette propriété.</p> + +<pre class="brush:js">function print_nav_timing_data() { + // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation". + let perfEntries = performance.getEntriesByType("navigation"); + + for (let i = 0; i < perfEntries.length; i++) { + console.log("= Entrée de navigation : entry[" + i + "]"); + let p = perfEntries[i]; + // propriétés du DOM + console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart)); + console.log("Contenu du DOM complet = " + p.domComplete); + console.log("Contenu du DOM interactif = " + p.interactive); + + // temps de chargement et de déchargement des documents + console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart)); + console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart)); + + // autres propriétés + console.log("type = " + p.type); + console.log("redirectCount = " + p.redirectCount); + } +} +</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('Navigation Timing Level 2', + '#dom-performancenavigationtiming-domcontentloadedeventstart', + 'domContentLoadedEventStart')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming.domContentLoadedEventStart")}}</p> diff --git a/files/fr/web/api/performancenavigationtiming/dominteractive/index.html b/files/fr/web/api/performancenavigationtiming/dominteractive/index.html new file mode 100644 index 0000000000..88045fd7d9 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/dominteractive/index.html @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.domInteractive +slug: Web/API/PerformanceNavigationTiming/domInteractive +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/domInteractive +--- +<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>domInteractive</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">interactif</a>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>perfEntry</var>.domInteractive;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Une <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">interactif</a>.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant illustre l'utilisation de cette propriété.</p> + +<pre class="brush:js">function print_nav_timing_data() { + // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation". + let perfEntries = performance.getEntriesByType("navigation"); + + for (let i =0; i < perfEntries.length; i++) { + console.log("= Entrée de navigation : entry[" + i + "]"); + let p = perfEntries[i]; + // propriétés du DOM + console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart)); + console.log("Contenu du DOM complet = " + p.domComplete); + console.log("Contenu du DOM interactif = " + p.interactive); + + // temps de chargement et de déchargement des documents + console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart)); + console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart)); + + // autres propriétés + console.log("type = " + p.type); + console.log("redirectCount = " + p.redirectCount); + } +} +</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('Navigation Timing Level 2', + '#dom-performancenavigationtiming-dominteractive', 'domInteractive')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming.domInteractive")}}</p> diff --git a/files/fr/web/api/performancenavigationtiming/index.html b/files/fr/web/api/performancenavigationtiming/index.html new file mode 100644 index 0000000000..bb1fdb48d1 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/index.html @@ -0,0 +1,106 @@ +--- +title: PerformanceNavigationTiming +slug: Web/API/PerformanceNavigationTiming +tags: + - API + - Interface + - Navigation Timing API + - Performance Timeline API + - Reference + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming +--- +<p>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</p> + +<p class="summary">L'interface <strong><code>PerformanceNavigationTiming</code></strong> fournit des méthodes et des propriétés pour stocker et récupérer des métriques concernant les événements de navigation de document du navigateur. Par exemple, cette interface peut être utilisée pour déterminer le temps nécessaire au chargement ou au déchargement d'un document.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Propriétés</h2> + +<p>Cette interface étend les propriétés de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes pour les types d'entrée de performance de navigation en les qualifiant et en les contraignant comme suit :</p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> {{readonlyInline}}</dt> + <dd>Retourne « <code>navigation</code> ».</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a> {{readonlyInline}}</dt> + <dd>Retourne l'adresse du <a href="https://dom.spec.whatwg.org/#concept-document-url">document</a>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a> {{readonlyInline}}</dt> + <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec une valeur de « <code>0</code> ».</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a> {{readonlyInline}}</dt> + <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp">timestamp</a> qui est la différence entre les propriétés <a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd"><code>PerformanceNavigationTiming.loadEventEnd</code></a> et <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a>.</dd> +</dl> + +<p>Cette interface étend également les propriétés <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a> suivantes pour les types d'entrée de performance de navigation en les qualifiant et en les contraignant comme suit :</p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/initiatorType"><code>PerformanceResourceTiming.initiatorType</code></a> {{readonlyInline}}</dt> + <dd>Retourne « <code>navigation</code> ».</dd> +</dl> + +<p>L'interface prend également en charge les propriétés suivantes :</p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/domComplete"><code>PerformanceNavigationTiming.domComplete</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant une valeur temporelle égale au temps immédiatement avant que le navigateur ne définisse la disponibilité du document actuel à <em><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">complete</a></em>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd"><code>PerformanceNavigationTiming.domContentLoadedEventEnd</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">DOMContentLoaded</a> du document actuel.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventStart"><code>PerformanceNavigationTiming.domContentLoadedEventStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">DOMContentLoaded</a> sur le document actuel.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/domInteractive"><code>PerformanceNavigationTiming.domInteractive</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant une valeur <a href="/fr/docs/Web/API/DOMHighResTimeStamp">temporelle</a> égale qui précède immédiatement le moment où l'agent utilisateur règle l'état de préparation du document actuel sur <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">interactif</a>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd"><code>PerformanceNavigationTiming.loadEventEnd</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant le moment où l'événement de chargement du document actuel est terminé.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventStart"><code>PerformanceNavigationTiming.loadEventStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle égale à l'heure précédant immédiatement l'événement de chargement du document actuel.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/redirectCount"><code>PerformanceNavigationTiming.redirectCount</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Un nombre représentant le nombre de redirections, depuis la dernière navigation sans redirection, dans le contexte de navigation actuel.</dd> + <dd>S'il n'y a pas eu de redirection, ou si la redirection provenait d'une autre origine, et que cette origine ne permet pas que ses informations temporelles soient exposées à l'origine actuelle, la valeur sera 0.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/requestStart"><code>PerformanceNavigationTiming.requestStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant le moment immédiatement avant que l'agent utilisateur ne commence à demander la ressource au serveur, ou aux caches d'application pertinents ou aux ressources locales.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/responseStart"><code>PerformanceNavigationTiming.responseStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure immédiatement après que l'analyseur HTTP de l'agent utilisateur ait reçu le premier octet de la réponse des caches d'application pertinents, ou des ressources locales ou du serveur.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/type"><code>PerformanceNavigationTiming.type</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Une chaîne de caractère <a href="/fr/docs/Web/API/DOMString">DOMString</a> représentant le type de navigation. Doit être : « <code>navigate</code> », « <code>reload</code> », « <code>back_forward</code> » ou « <code>prerender</code> ».</dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventEnd"><code>PerformanceNavigationTiming.unloadEventEnd</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle égale au temps immédiatement après que l'agent utilisateur ait terminé l'événement de déchargement du document précédent.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventStart"><code>PerformanceNavigationTiming.unloadEventStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne lance l'événement de déchargement du document précédent.</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/toJSON"><code>PerformanceNavigationTiming.toJSON()</code></a> {{Experimental_Inline}}</dt> + <dd>Retourne une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a>.</dd> +</dl> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécifications</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Navigation Timing Level 2', '#sec-PerformanceNavigationTiming', 'PerformanceNavigationTiming')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/Performance/navigation"><code>Performance.navigation</code></a></li> + <li><a href="/fr/docs/Web/API/PerformanceNavigation"><code>PerformanceNavigation</code></a></li> +</ul> diff --git a/files/fr/web/api/performancenavigationtiming/loadeventend/index.html b/files/fr/web/api/performancenavigationtiming/loadeventend/index.html new file mode 100644 index 0000000000..58b2490f45 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/loadeventend/index.html @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.loadEventEnd +slug: Web/API/PerformanceNavigationTiming/loadEventEnd +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/loadEventEnd +--- +<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>loadEventEnd</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui est égal à l'heure à laquelle l'événement de chargement du document actuel est terminé.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js"><var>perfEntry</var>.loadEventEnd;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant le moment où l'événement de chargement du document actuel est terminé.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant illustre l'utilisation de cette propriété.</p> + +<pre class="brush:js">function print_nav_timing_data() { + // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation". + let perfEntries = performance.getEntriesByType("navigation"); + + for (let i = 0; i < perfEntries.length; i++) { + console.log("= Entrée de navigation : entry[" + i + "]"); + let p = perfEntries[i]; + // propriétés du DOM + console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart)); + console.log("Contenu du DOM complet = " + p.domComplete); + console.log("Contenu du DOM interactif = " + p.interactive); + + // temps de chargement et de déchargement des documents + console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart)); + console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart)); + + // autres propriétés + console.log("type = " + p.type); + console.log("redirectCount = " + p.redirectCount); + } +} +</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('Navigation Timing Level 2', + '#dom-performancenavigationtiming-loadeventend', 'loadEventEnd')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming.loadEventEnd")}}</p> diff --git a/files/fr/web/api/performancenavigationtiming/loadeventstart/index.html b/files/fr/web/api/performancenavigationtiming/loadeventstart/index.html new file mode 100644 index 0000000000..910b29c044 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/loadeventstart/index.html @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.loadEventStart +slug: Web/API/PerformanceNavigationTiming/loadEventStart +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/loadEventStart +--- +<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>loadEventStart</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant le déclenchement de l'événement de chargement du document actuel.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js"><var>perfEntry</var>.loadEventStart;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant une valeur temporelle égale à l'heure précédant immédiatement l'événement de chargement du document actuel.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant illustre l'utilisation de cette propriété.</p> + +<pre class="brush:js">function print_nav_timing_data() { + // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation". + let perfEntries = performance.getEntriesByType("navigation"); + + for (let i = 0; i < perfEntries.length; i++) { + console.log("= Entrée de navigation : entry[" + i + "]"); + let p = perfEntries[i]; + // propriétés du DOM + console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart)); + console.log("Contenu du DOM complet = " + p.domComplete); + console.log("Contenu du DOM interactif = " + p.interactive); + + // temps de chargement et de déchargement des documents + console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart)); + console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart)); + + // autres propriétés + console.log("type = " + p.type); + console.log("redirectCount = " + p.redirectCount); + } +} +</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('Navigation Timing Level 2', + '#dom-performancenavigationtiming-loadeventstart', 'loadEventStart')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming.loadEventStart")}}</p> diff --git a/files/fr/web/api/performancenavigationtiming/redirectcount/index.html b/files/fr/web/api/performancenavigationtiming/redirectcount/index.html new file mode 100644 index 0000000000..5c17f209f2 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/redirectcount/index.html @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.redirectCount +slug: Web/API/PerformanceNavigationTiming/redirectCount +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/redirectCount +--- +<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>redirectCount</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant le nombre de redirections depuis la dernière navigation sans redirection dans le contexte de navigation actuel.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>perfEntry</var>.redirectCount;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un nombre représentant le nombre de redirections depuis la dernière navigation sans redirection dans le contexte de navigation actuel.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant illustre l'utilisation de cette propriété.</p> + +<pre class="brush:js">function print_nav_timing_data() { + // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation". + let perfEntries = performance.getEntriesByType("navigation"); + + for (let i = 0; i < perfEntries.length; i++) { + console.log("= Entrée de navigation : entry[" + i + "]"); + let p = perfEntries[i]; + // propriétés du DOM + console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart)); + console.log("Contenu du DOM complet = " + p.domComplete); + console.log("Contenu du DOM interactif = " + p.interactive); + + // temps de chargement et de déchargement des documents + console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart)); + console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart)); + + // autres propriétés + console.log("type = " + p.type); + console.log("redirectCount = " + p.redirectCount); + } +} +</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('Navigation Timing Level 2', + '#dom-performancenavigationtiming-redirectcount', 'redirectCount')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming.redirectCount")}}</p> diff --git a/files/fr/web/api/performancenavigationtiming/tojson/index.html b/files/fr/web/api/performancenavigationtiming/tojson/index.html new file mode 100644 index 0000000000..8ca2ec6289 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/tojson/index.html @@ -0,0 +1,66 @@ +--- +title: PerformanceNavigationTiming.toJSON() +slug: Web/API/PerformanceNavigationTiming/toJSON +tags: + - API + - Method + - Méthode + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/toJSON +--- +<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> + +<p>La méthode <strong><code>toJSON()</code></strong> est un <em>sérialiseur</em> - elle renvoie une représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">const <var>json</var> = <var>resourcePerfEntry</var>.toJSON();</pre> + +<h3 id="Arguments">Arguments</h3> + +<p>Aucun.</p> + +<h3 id="Return_value">Valeur de retour</h3> + +<dl> + <dt><code>json</code></dt> + <dd>Un objet JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> comme une carte avec des entrées de l'interface héritée la plus proche et avec des entrées pour chacun des attributs sérialisables.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">// Obtient une entrée de performance des ressources +let perfEntries = performance.getEntriesByType("navigation"); +let entry = perfEntries[0]; + +// Récupère le JSON et l'affiche dans les journaux +let json = entry.toJSON(); +let s = JSON.stringify(json); +console.log("PerformanceNavigationTiming.toJSON() = " + s); +</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('Navigation Timing Level 2', + '#dom-performancenavigationtiming-tojson', 'toJSON()')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming.toJSON")}}</p> diff --git a/files/fr/web/api/performancenavigationtiming/type/index.html b/files/fr/web/api/performancenavigationtiming/type/index.html new file mode 100644 index 0000000000..4c0d9dcb12 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/type/index.html @@ -0,0 +1,85 @@ +--- +title: PerformanceNavigationTiming.type +slug: Web/API/PerformanceNavigationTiming/type +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/type +--- +<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>type</code></strong> renvoie une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le type de navigation. La valeur doit être l'une des suivantes :</p> + +<dl> + <dt><code>navigate</code></dt> + <dd>La navigation a commencé en cliquant sur un lien, en saisissant l'URL dans la barre d'adresse du navigateur, en soumettant un formulaire ou en s'initialisant par une opération de script autre que reload et back_forward, comme indiqué ci-dessous.</dd> + <dt><code>reload</code></dt> + <dd>La navigation s'effectue par l'opération de rechargement du navigateur ou <a href="/fr/docs/Web/API/location/reload"><code>location.reload()</code></a>.</dd> + <dt><code>back_forward</code></dt> + <dd>La navigation se fait par l'opération de traversée de l'historique du navigateur.</dd> + <dt><code>prerender</code></dt> + <dd>La navigation est initiée par un <a href="https://www.w3.org/TR/resource-hints/#prerender">indice de prétraitement</a>.</dd> +</dl> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js"><var>perfEntry</var>.type;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'une des valeurs énumérées ci-dessus.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant illustre l'utilisation de cette propriété.</p> + +<pre class="brush:js">function print_nav_timing_data() { + // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation". + let perfEntries = performance.getEntriesByType("navigation"); + + for (let i = 0; i < perfEntries.length; i++) { + console.log("= Entrée de navigation : entry[" + i + "]"); + let p = perfEntries[i]; + // propriétés du DOM + console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart)); + console.log("Contenu du DOM complet = " + p.domComplete); + console.log("Contenu du DOM interactif = " + p.interactive); + + // temps de chargement et de déchargement des documents + console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart)); + console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart)); + + // autres propriétés + console.log("type = " + p.type); + console.log("redirectCount = " + p.redirectCount); + } +} +</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('Navigation Timing Level 2', '#dom-performancenavigationtiming-type', + 'type')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming.type")}}</p> diff --git a/files/fr/web/api/performancenavigationtiming/unloadeventend/index.html b/files/fr/web/api/performancenavigationtiming/unloadeventend/index.html new file mode 100644 index 0000000000..c1625c81d2 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/unloadeventend/index.html @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.unloadEventEnd +slug: Web/API/PerformanceNavigationTiming/unloadEventEnd +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/unloadEventEnd +--- +<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>unloadEventEnd</code></strong> en lecture seule retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement de déchargement du document précédent par l'agent utilisateur. S'il n'y a pas de document précédent, la valeur de cette propriété est <code>0</code>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js"><var>perfEntry</var>.unloadEventEnd;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant une valeur temporelle égale au temps immédiatement après que l'agent utilisateur ait terminé l'événement de déchargement du document précédent.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant illustre l'utilisation de cette propriété.</p> + +<pre class="brush:js">function print_nav_timing_data() { + // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation". + let perfEntries = performance.getEntriesByType("navigation"); + + for (let i = 0; i < perfEntries.length; i++) { + console.log("= Entrée de navigation : entry[" + i + "]"); + let p = perfEntries[i]; + // propriétés du DOM + console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart)); + console.log("Contenu du DOM complet = " + p.domComplete); + console.log("Contenu du DOM interactif = " + p.interactive); + + // temps de chargement et de déchargement des documents + console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart)); + console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart)); + + // autres propriétés + console.log("type = " + p.type); + console.log("redirectCount = " + p.redirectCount); + } +} +</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('Navigation Timing Level 2', + '#dom-performancenavigationtiming-unloadeventend', 'unloadEventEnd')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming.unloadEventEnd")}}</p> diff --git a/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.html b/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.html new file mode 100644 index 0000000000..f4b7ceabba --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.html @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.unloadEventStart +slug: Web/API/PerformanceNavigationTiming/unloadEventStart +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/unloadEventStart +--- +<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>unloadEventStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne commence l'événement de déchargement du document précédent. S'il n'y a pas de document précédent, cette propriété renvoie <code>0</code>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js"><var>perfEntry</var>.unloadEventStart;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne lance l'événement de déchargement du document précédent.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant illustre l'utilisation de cette propriété.</p> + +<pre class="brush:js">function print_nav_timing_data() { + // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation". + let perfEntries = performance.getEntriesByType("navigation"); + + for (let i = 0; i < perfEntries.length; i++) { + console.log("= Entrée de navigation : entry[" + i + "]"); + let p = perfEntries[i]; + // propriétés du DOM + console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart)); + console.log("Contenu du DOM complet = " + p.domComplete); + console.log("Contenu du DOM interactif = " + p.interactive); + + // temps de chargement et de déchargement des documents + console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart)); + console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart)); + + // autres propriétés + console.log("type = " + p.type); + console.log("redirectCount = " + p.redirectCount); + } +} +</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('Navigation Timing Level 2', + '#dom-performancenavigationtiming-unloadeventstart', 'unloadEventStart')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceNavigationTiming.unloadEventStart")}}</p> diff --git a/files/fr/web/api/performanceobserver/disconnect/index.html b/files/fr/web/api/performanceobserver/disconnect/index.html new file mode 100644 index 0000000000..d4e509708b --- /dev/null +++ b/files/fr/web/api/performanceobserver/disconnect/index.html @@ -0,0 +1,66 @@ +--- +title: PeformanceObserver.disconnect() +slug: Web/API/PerformanceObserver/disconnect +tags: + - API + - Method + - Méthode + - Performance Observer API + - PerformanceObserver + - Reference + - Performance Web + - disconnect() + - observers +translation_of: Web/API/PerformanceObserver/disconnect +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p>La méthode <strong><code>disconnect()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> est utilisée pour empêcher l'observateur de performances de recevoir tout événement <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>performanceObserver</var>.disconnect();</pre> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">const observer = new PerformanceObserver(function(list, obj) { + let entries = list.getEntries(); + for (let i=0; i < entries.length; i++) { + // Traiter les événements "mark" et "frame" + } +}); +observer.observe({entryTypes: ["mark", "frame"]}); + +function perf_observer(list, observer) { + // Traiter l'événement "measure". + // ... + // Désactiver les événements de performance supplémentaires + observer.disconnect(); +} +const observer2 = new PerformanceObserver(perf_observer); +observer2.observe({entryTypes: ["measure"]}); +</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('Performance Timeline Level 2', + '#dom-performanceobserver-disconnect', 'disconnect()')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Définition initiale de la méthode <code>disconnect()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceObserver.disconnect")}}</p> diff --git a/files/fr/web/api/performanceobserver/index.html b/files/fr/web/api/performanceobserver/index.html new file mode 100644 index 0000000000..2b52bba127 --- /dev/null +++ b/files/fr/web/api/performanceobserver/index.html @@ -0,0 +1,75 @@ +--- +title: PerformanceObserver +slug: Web/API/PerformanceObserver +tags: + - API + - Interface + - Performance Observer API + - PerformanceObserver + - Reference + - Performance Web + - observers +translation_of: Web/API/PerformanceObserver +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">L'interface <strong><code>PerformanceObserver</code></strong> est utilisée pour <em>observer</em> les événements de mesure des performances et être notifié des nouvelles <a href="/fr/docs/Web/API/PerformanceEntry">entréés de performance</a> lorsqu'elles sont enregistrées dans la <em>chronologie des performances</em> du navigateur.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Constructor">Constructeur</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceObserver/PerformanceObserver"><code>PerformanceObserver()</code></a></dt> + <dd>Crée et retourne un nouvel objet <code>PerformanceObserver</code>.</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>PerformanceObserver.observe()</code></a></dt> + <dd>Spécifie l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> à observer. La fonction de rappel de l'observateur de performances sera invoquée lorsqu'une <a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a> est enregistrée pour l'un des <code>entryTypes</code> spécifiés.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceObserver/disconnect"><code>PerformanceObserver.disconnect()</code></a></dt> + <dd>Arrête l'observation des <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceObserver/takeRecords"><code>PerformanceObserver.takeRecords()</code></a> {{Experimental_Inline}}</dt> + <dd>Renvoie la liste actuelle des <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a> stockées dans l'observateur de performance, en la vidant.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<pre class="brush:js">function perf_observer(list, observer) { + // Traiter l'événement "measure". +} +const observer2 = new PerformanceObserver(perf_observer); +observer2.observe({entryTypes: ["measure"]});</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('Performance Timeline Level 2', '#dom-performanceobserver', 'PerformanceObserver')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Définition initiale de l'interface <code>PerformanceObserver</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceObserver")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/MutationObserver"><code>MutationObserver</code></a></li> + <li><a href="/fr/docs/Web/API/ResizeObserver"><code>ResizeObserver</code></a></li> + <li><a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a></li> +</ul> diff --git a/files/fr/web/api/performanceobserver/observe/index.html b/files/fr/web/api/performanceobserver/observe/index.html new file mode 100644 index 0000000000..60366f066a --- /dev/null +++ b/files/fr/web/api/performanceobserver/observe/index.html @@ -0,0 +1,79 @@ +--- +title: PerformanceObserver.observe() +slug: Web/API/PerformanceObserver/observe +tags: + - API + - Method + - Méthode + - Performance + - PerformanceObserver + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserver/observe +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">La méthode <strong><code>observe()</code></strong> de l'interface <strong><a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a></strong> est utilisée pour spécifier l'ensemble des types d'entrée de performance à observer. Les types d'entrée de performance sont spécifiés sous la forme d'un tableau d'objets <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>, chacun nommant un type d'entrée ; les noms de type sont documentés sur la page <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>.</p> + +<p>Lorsqu'une entrée de performance correspondante est enregistrée, la fonction de rappel de l'observateur de performance — définie lors de la création du <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> — est invoquée.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js"><var>observer</var>.observe(<var>options</var>);</pre> + +<h3 id="Parameters">Paramètres</h3> + +<dl> + <dt><code>options</code></dt> + <dd>Un dictionnaire <code>PerformanceObserverInit</code> avec les membres possibles suivants : + <ul> + <li><code>entryTypes</code> : Un tableau d'objets <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>, chacun spécifiant un type d'entrée de performance à observer. Ne peut pas être utilisé avec les options « <code>type</code> » ou « <code>buffered</code> ».</li> + <li><code>type</code> : Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> unique spécifiant exactement un type d'entrée de performance à observer. Ne peut pas être utilisé avec l'option <code>entryTypes</code>.</li> + <li><code>buffered</code> : Un indicateur booléen pour indiquer si les entrées en mémoire tampon doivent être mises en file d'attente dans la mémoire tampon de l'observateur. Ne doit être utilisé qu'avec l'option « <code>type</code> ».</li> + </ul> + <p class="notecard note">Voir <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> pour une liste des noms de types d'entrées de performance valides. Les types non reconnus sont ignorés, bien que le navigateur puisse afficher un message d'avertissement sur la console pour aider les développeurs à déboguer leur code. Si aucun type valide n'est trouvé, <code>observe()</code> n'a aucun effet.</p> + </dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<p>Cet exemple crée et configure deux <code>PerformanceObservers</code> ; l'un surveille les événements <code>"mark"</code> et <code>"frame"</code>, et l'autre surveille les événements <code>"measure"</code>.</p> + +<pre class="brush: js">const observer = new PerformanceObserver(function(list, obj) { + let entries = list.getEntries(); + for (let i = 0; i < entries.length; i++) { + // Traiter les événements "mark" et "famse" + } +}); +observer.observe({entryTypes: ["mark", "frame"]}); + +function perf_observer(list, observer) { + // Traiter l'événement "measure" +} +const observer2 = new PerformanceObserver(perf_observer); +observer2.observe({entryTypes: ["measure"]}); +</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('Performance Timeline Level 2', '#dom-performanceobserver-observe', + 'observe()')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Définition initiale de la méthode <code>observe()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceObserver.observe")}}</p> diff --git a/files/fr/web/api/performanceobserver/performanceobserver/index.html b/files/fr/web/api/performanceobserver/performanceobserver/index.html new file mode 100644 index 0000000000..f0388d0689 --- /dev/null +++ b/files/fr/web/api/performanceobserver/performanceobserver/index.html @@ -0,0 +1,71 @@ +--- +title: PerformanceObserver() +slug: Web/API/PerformanceObserver/PerformanceObserver +tags: + - API + - Constructor + - Constructeur + - PerformanceObserver + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserver/PerformanceObserver +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">Le constructeur <strong><code>PerformanceObserver()</code></strong> crée un nouvel objet <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> avec le <code>callback</code> d'observation donné. La fonction de rappel de l'observateur est invoquée lorsque des <a href="/fr/docs/Web/API/PerformanceEntry">événements d'entrée de performance</a> sont répertoriés pour les <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> qui ont été enregistrés, via la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush:js">const <var>observer</var> = new PerformanceObserver(<var>callback</var>);</pre> + +<h3 id="Parameters">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Une fonction de rappel qui sera invoquée lorsque des événements de performance <em>observés</em> sont enregistrés. Lorsque la fonction de rappel est invoquée, son premier paramètre est une <a href="/fr/docs/Web/API/PerformanceObserverEntryList">liste des entrées de l'observateur de performance</a> et le second paramètre est l'objet <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> courant.</dd> +</dl> + +<h3 id="Return_value">Valeur de retour</h3> + +<p>Un nouvel objet <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> qui appellera le <code>callback</code> spécifiée lorsque des événements de performance observés se produisent.</p> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">const observer = new PerformanceObserver(function(list, obj) { + let entries = list.getEntries(); + for (let i = 0; i < entries.length; i++) { + // Traiter les événements "mark" et "frame" + } +}); +observer.observe({entryTypes: ["mark", "frame"]}); + +function perf_observer(list, observer) { + // Traiter l'événement "measure" +} +const observer2 = new PerformanceObserver(perf_observer); +observer2.observe({entryTypes: ["measure"]}); +</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('Performance Timeline Level 2', + '#idl-def-performanceobservercallback', 'PerformanceObserver()')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Définition initiale du constructeur <code>PerformanceObserver()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceObserver.PerformanceObserver")}}</p> diff --git a/files/fr/web/api/performanceobserver/takerecords/index.html b/files/fr/web/api/performanceobserver/takerecords/index.html new file mode 100644 index 0000000000..3d7dba65c9 --- /dev/null +++ b/files/fr/web/api/performanceobserver/takerecords/index.html @@ -0,0 +1,68 @@ +--- +title: PerformanceObserver.takeRecords() +slug: Web/API/PerformanceObserver/takeRecords +tags: +- API +- Method +- Méthode +- Performance Observer API +- PerformanceObserver +- Reference +- observers +- takeRecords() +translation_of: Web/API/PerformanceObserver/disconnect +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p>La méthode <strong><code>takeRecords()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code> renvoie la liste actuelle des <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> stockées dans l'observateur de performance, en la vidant.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>performanceEntryList<var> = <var>performanceObserver</var>.takeRecords();</pre> + +<h3 id="Parameters">Paramètres</h3> + +<p>Aucun.</p> + +<h3 id="Return_value">Valeur de retour</h3> + +<p>Une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a>.</p> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">const observer = new PerformanceObserver(function(list, obj) { + let entries = list.getEntries(); + for (let i= 0; i < entries.length; i++) { + // Traiter les événements "mark" et "frame" + } +}); +observer.observe({entryTypes: ["mark", "frame"]}); +let records = observer.takeRecords(); +console.log(records[0].name); +console.log(records[0].startTime); +console.log(records[0].duration); +</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('Performance Timeline Level 2', + '#dom-performanceobserver-takerecords', 'takeRecords()')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Définition initiale de la méthode <code>takeRecords()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceObserver.takeRecords")}}</p> diff --git a/files/fr/web/api/performanceobserverentrylist/getentries/index.html b/files/fr/web/api/performanceobserverentrylist/getentries/index.html new file mode 100644 index 0000000000..4d24a1550a --- /dev/null +++ b/files/fr/web/api/performanceobserverentrylist/getentries/index.html @@ -0,0 +1,115 @@ +--- +title: PerformanceObserverEntryList.getEntries() +slug: Web/API/PerformanceObserverEntryList/getEntries +tags: + - API + - Method + - Méthode + - PerformanceObserverEntryList + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserverEntryList/getEntries +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">La méthode <strong><code>getEntries()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets explicitement <em>observés</em> d'<a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> pour un filtre donné. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrée</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p> + +<div class="notecard note"> + <p><strong>Remarque :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> +</div> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>entries</var> = list.getEntries(); +<var>entries</var> = list.getEntries(<var>PerformanceEntryFilterOptions</var>);</pre> + +<p>Utilisation spécifique :</p> + +<pre class="brush: js"><var>entries</var> = list.getEntries({name: "entry_name", entryType: "mark"});</pre> + +<h3 id="Parameters">Paramètres</h3> + +<dl> + <dt><code><em>PerformanceEntryFilterOptions</em></code> {{optional_inline}}</dt> + <dd>Est un dictionnaire <code>PerformanceEntryFilterOptions</code>, comportant les champs suivants : + <ul> + <li><code>"name"</code>, le nom d'une entrée de performance.</li> + <li><code>"entryType"</code>, le type d'entrée. Les types d'entrée valides sont énumérés dans la propriété <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>.</li> + <li><code>"initiatorType"</code>, le type de la ressource initiatrice (par exemple un élément HTML). Les valeurs sont définies par la propriété <a href="/fr/docs/Web/API/PerformanceResourceTiming/initiatorType"><code>PerformanceResourceTiming.initiatorType</code></a>.</li> + </ul> + Ce paramètre n'est actuellement pas pris en charge par Chrome ou Opera. + </dd> +</dl> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> explicitement <em>observés</em> qui répondent aux critères du filtre. Les éléments seront dans l'ordre chronologique basé sur les <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a> des entrées. Si aucun objet répondant au filtre n'est trouvé, une liste vide est renvoyée. Si aucun argument n'est fourni, toutes les entrées sont renvoyées.</p> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">function print_perf_entry(pe) { + console.log("name: " + pe.name + + "; entryType: " + pe.entryType + + "; startTime: " + pe.startTime + + "; duration: " + pe.duration); +} + +// Crée un observateur pour tous les types d'événements de performance +const 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 de type "mark". + perfEntries = list.getEntriesByType("mark"); + for (let i = 0; i < perfEntries.length; i++) { + print_perf_entry(perfEntries[i]); + } +}); +// inscrire tous les types d'événements de performance +observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); + +const observe_frame = new PerformanceObserver(function(list, obs) { + let perfEntries = list.getEntries(); + // Ne devrait avoir que des entrées "frame" + for (let i = 0; i < perfEntries.length; i++) { + print_perf_entry(perfEntries[i]); + } +}); +// inscrire à l'événement "frame" uniquement +observe_frame.observe({entryTypes: ['frame']}); +</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('Performance Timeline Level 2', + '#dom-performanceobserverentrylist-getentries', 'getEntries()')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceObserverEntryList.getEntries")}}</p> diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html b/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html new file mode 100644 index 0000000000..f1a517d93a --- /dev/null +++ b/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html @@ -0,0 +1,105 @@ +--- +title: PerformanceObserverEntryList.getEntriesByName() +slug: Web/API/PerformanceObserverEntryList/getEntriesByName +tags: + - API + - Method + - Méthode + - PerformanceObserverEntryList + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserverEntryList/getEntriesByName +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">La méthode <strong><code>getEntriesByName()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a> explicitement <em>observés</em> pour un <em><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>name</code></a></em> et <em><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a></em> donnés. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p> + +<div class="notecard note"> + <p><strong>Remarque :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> +</div> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>entries</var> = <var>list</var>.getEntriesByName(<var>name</var>, <var>type</var>);</pre> + +<h3 id="Parameters">Paramètres</h3> + +<dl> + <dt><em><code>name</code></em></dt> + <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le nom de l'entrée à récupérer.</dd> + <dt><em><code>type</code></em> {{optional_inline}}</dt> + <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le type d'entrée à récupérer tel que « <code>mark</code> ». Les types d'entrée valides sont énumérés dans <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>.</dd> +</dl> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a> explicitement <em>observés</em> qui ont le <code>name</code> et le <code>type</code> spécifiés. Si l'argument <code>type</code> n'est pas spécifié, seul <code>name</code> sera utilisé pour déterminer les entrées à retourner. Les éléments seront triés dans l'ordre chronologique selon les <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a> des entrées. Si aucun objet ne répond aux critères spécifiés, une liste vide est retournée.</p> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">function print_perf_entry(pe) { + console.log("name: " + pe.name + + "; entryType: " + pe.entryType + + "; startTime: " + pe.startTime + + "; duration: " + pe.duration); +} + +// Crée un observateur pour tous les types d'événements de performance +const 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 de type "mark". + perfEntries = list.getEntriesByType("mark"); + for (let i = 0; i < perfEntries.length; i++) { + print_perf_entry(perfEntries[i]); + } +}); +// inscrire tous les types d'événements de performance +observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); + +const observe_frame = new PerformanceObserver(function(list, obs) { + let perfEntries = list.getEntries(); + // Ne devrait avoir que des entrées "frame" + for (let i = 0; i < perfEntries.length; i++) { + print_perf_entry(perfEntries[i]); + } +}); +// inscrire à l'événement "frame" uniquement +observe_frame.observe({entryTypes: ['frame']}); +</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('Performance Timeline Level 2', + '#dom-performanceobserverentrylist-getentriesbyname', 'getEntriesByName()')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Définition initiale de la méthode <code>getEntriesByName()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceObserverEntryList.getEntriesByName")}}</p> diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html b/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html new file mode 100644 index 0000000000..cf8e62a58e --- /dev/null +++ b/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html @@ -0,0 +1,102 @@ +--- +title: PerformanceObserverEntryList.getEntriesByType() +slug: Web/API/PerformanceObserverEntryList/getEntriesByType +tags: + - API + - Method + - Méthodes + - PerformanceObserverEntryList + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserverEntryList/getEntriesByType +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">La méthode <strong><code>getEntriesByType()</code></strong> de la <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a> explicitement <em>observés</em> pour un <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type d'entrée de performance</a>. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p> + +<div class="notecard note"> + <p><strong>Remarque :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> +</div> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>entries</var> = <var>list</var>.getEntriesByType(<var>type</var>);</pre> + +<h3 id="Parameters">Paramètres</h3> + +<dl> + <dt><em><code>type</code></em></dt> + <dd>Le type d'entrée à récupérer, tel que « <code>frame</code> ». Les types d'entrée valides sont énumérés dans <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>.</dd> +</dl> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> explicitement <em>observés</em> qui ont le <code>type</code> spécifié. Les éléments seront dans l'ordre chronologique basé sur les <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a> des entrées. Si aucun objet n'a le <code>type</code> spécifié, ou si aucun argument n'est fourni, une liste vide est retournée.</p> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">function print_perf_entry(pe) { + console.log("name: " + pe.name + + "; entryType: " + pe.entryType + + "; startTime: " + pe.startTime + + "; duration: " + pe.duration); +} + +// Crée un observateur pour tous les types d'événements de performance +const 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 de type "mark". + perfEntries = list.getEntriesByType("mark"); + for (let i = 0; i < perfEntries.length; i++) { + print_perf_entry(perfEntries[i]); + } +}); +// inscrire tous les types d'événements de performance +observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); + +const observe_frame = new PerformanceObserver(function(list, obs) { + let perfEntries = list.getEntries(); + // Ne devrait avoir que des entrées "frame" + for (let i = 0; i < perfEntries.length; i++) { + print_perf_entry(perfEntries[i]); + } +}); +// inscrire à l'événement "frame" uniquement +observe_frame.observe({entryTypes: ['frame']}); +</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('Performance Timeline Level 2', '#dom-performanceobserverentrylist-getentriesbytype', 'getEntriesByType()')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Définition initiale de la méthode <code>getEntriesByType()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceObserverEntryList.getEntriesByType")}}</p> diff --git a/files/fr/web/api/performanceobserverentrylist/index.html b/files/fr/web/api/performanceobserverentrylist/index.html new file mode 100644 index 0000000000..7b1ad9d5cb --- /dev/null +++ b/files/fr/web/api/performanceobserverentrylist/index.html @@ -0,0 +1,63 @@ +--- +title: PerformanceObserverEntryList +slug: Web/API/PerformanceObserverEntryList +tags: + - API + - Interface + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserverEntryList +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="summary">L'interface <strong><code>PerformanceObserverEntryList</code></strong> est une liste d'<a href="/fr/docs/Web/API/PerformanceEntry">événements de performance</a> qui ont été explicitement <em>observés</em> via la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>.</p> + +<div class="notecard note"> + <p><strong>Remarque :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> +</div> + +<h2 id="Methods">Méthodes</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceObserverEntryList/getEntries"><code>PerformanceObserverEntryList.getEntries()</code></a></dt> + <dd>Retourne une liste d'objets explicitement <em>observés</em> de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> en fonction du <em>filtre</em> donné.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceObserverEntryList/getEntriesByType"><code>PerformanceObserverEntryList.getEntriesByType()</code></a></dt> + <dd>Retourne une liste d'objets explicitement <em>observés</em> de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> du <em>type d'entrée</em> donné.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceObserverEntryList/getEntriesByName"><code>PerformanceObserverEntryList.getEntriesByName()</code></a></dt> + <dd>Retourne une liste d'objets explicitement <em>observés</em> de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> en fonction du <em>nom</em> et du <em>type d'entrée</em> donnés.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">// Crée un observateur pour tous les types d'événements de performance +// la liste est de type PerformanceObserveEntryList +const observe_all = new PerformanceObserver(function(list, obs) { + let perfEntries = list.getEntries(); + for (let i = 0; i < perfEntries.length; i++) { + print_perf_entry(perfEntries[i]); + // faire quelque chose avec + } +})</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('Performance Timeline Level 2', '#idl-def-performanceobserverentrylist', 'PerformanceObserverEntryList')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceObserverEntryList")}}</p> diff --git a/files/fr/web/api/performancepainttiming/index.html b/files/fr/web/api/performancepainttiming/index.html new file mode 100644 index 0000000000..6fc7c6c392 --- /dev/null +++ b/files/fr/web/api/performancepainttiming/index.html @@ -0,0 +1,81 @@ +--- +title: PerformancePaintTiming +slug: Web/API/PerformancePaintTiming +tags: + - API + - Interface + - Paint Timing + - Performance Timeline API + - PerformancePaintTiming + - Reference + - Performance Web +translation_of: Web/API/PerformancePaintTiming +--- +<p>{{APIRef("Performance Timeline API")}}</p> + +<p class="summary">L'interface <strong><code>PerformancePaintTiming</code></strong> de l'API <a href="/fr/docs/Web/API/Paint_Timing_API">Paint Timing API</a> fournit des informations de temps sur les opérations de « peinture » (également appelées « render ») pendant la construction de la page Web. « Paint » fait référence à la conversion de l'arbre de rendu en pixels à l'écran.</p> + +<p>Une application peut enregistrer un <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour le <a href="/fr/docs/Web/API/PerformanceEntry">type d'entrée de performance</a> « <code>paint</code> » et l'observateur peut récupérer les heures auxquelles les événements de peinture se produisent. Utilisez ces informations pour aider à identifier les zones qui prennent trop de temps pour offrir une bonne expérience utilisateur.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Propriétés</h2> + +<p>Cette interface n'a pas de propriétés mais elle étend les propriétés de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes (pour <a href="/fr/docs/Web/API/PerformanceEntry/entryType">le type d'entrée de performance</a> « <code>paint</code> ») en qualifiant/contraignant les propriétés comme suit :</p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a></dt> + <dd>Retourne « <code>paint</code> ».</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a></dt> + <dd>Retourne soit <code>"first-paint"</code> ou <code>"first-contentful-paint"</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a></dt> + <dd>Retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> du moment où la peinture s'est produite.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a></dt> + <dd>Retourne « <code>0</code> ».</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<p>Cette interface n'a pas de méthodes.</p> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">function showPaintTimings() { + if (window.performance) { + let performance = window.performance; + let performanceEntries = performance.getEntriesByType('paint'); + performanceEntries.forEach( (performanceEntry, i, entries) => { + console.log("Le temps pour " + performanceEntry.name + " est de " + performanceEntry.startTime + " millisecondes."); + }); + } else { + console.log("Performance Timing n'est pas prise en charge."); + } +}</pre> + +<p>Le code ci-dessus produit une sortie de console semblable à ce qui suit :</p> + +<pre>Le temps pour first-paint est de 2785.915 millisecondes. +Le temps pour first-contentful-paint est de 2787.460 millisecondes.</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('Paint Timing','#sec-PerformancePaintTiming','PerformancePaintTiming')}}</td> + <td>{{Spec2('Paint Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformancePaintTiming")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/connectend/index.html b/files/fr/web/api/performanceresourcetiming/connectend/index.html new file mode 100644 index 0000000000..a7b5dcf04c --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/connectend/index.html @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.connectEnd +slug: Web/API/PerformanceResourceTiming/connectEnd +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - connectEnd +translation_of: Web/API/PerformanceResourceTiming/connectEnd +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>connectEnd</code></strong> renvoie le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> de l'instant suivant immédiatement la fin d'établissement de la connexion du navigateur au serveur pour récupérer la ressource. La valeur de l'horodatage comprend l'intervalle de temps pour établir la connexion de transport, ainsi que d'autres intervalles de temps tels que la poignée de main TLS/SSL et l'authentification SOCKS.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.connectEnd;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant le temps après l'établissement d'une connexion.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont consignés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing', '#dom-performanceresourcetiming-connectend', + 'connectEnd')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.connectEnd")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/connectstart/index.html b/files/fr/web/api/performanceresourcetiming/connectstart/index.html new file mode 100644 index 0000000000..198a11274c --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/connectstart/index.html @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.connectStart +slug: Web/API/PerformanceResourceTiming/connectStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - connectStart +translation_of: Web/API/PerformanceResourceTiming/connectStart +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>connectStart</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> de l'instant avant que l'agent utilisateur ne commence à établir la connexion au serveur pour récupérer la ressource.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.connectStart;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence à établir la connexion avec le serveur pour récupérer la ressource.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont consignés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing', '#dom-performanceresourcetiming-connectstart', + 'connectStart')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.connectStart")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html b/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html new file mode 100644 index 0000000000..d7a23cd166 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.decodedBodySize +slug: Web/API/PerformanceResourceTiming/decodedBodySize +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - decodedBodySize +translation_of: Web/API/PerformanceResourceTiming/decodedBodySize +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>decodedBodySize</code></strong> renvoie la taille (en octets) reçue de la récupération (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué. Si la ressource est récupérée à partir d'un cache d'application ou de ressources locales, elle renvoie la taille de la donnée utile après suppression de tous les codages de contenu appliqués.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.decodedBodySize;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>La taille (en octets) reçue de l'extraction (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés de taille de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> est enregistrée.</p> + +<pre class="brush: js">function log_sizes(<var>perfEntry</var>){ + // Vérifie la prise en charge des propriétés *size et imprime leurs + // valeurs si elles sont prises en charge. + if ("decodedBodySize" in perfEntry) { + console.log("decodedBodySize = " + perfEntry.decodedBodySize); + } else { + console.log("decodedBodySize = N'EST PAS pris en charge"); + } + + if ("encodedBodySize" in perfEntry) { + console.log("encodedBodySize = " + perfEntry.encodedBodySize); + } else { + console.log("encodedBodySize = N'EST PAS pris en charge"); + } + + if ("transferSize" in perfEntry) { + console.log("transferSize = " + perfEntry.transferSize); + } else { + console.log("transferSize = N'EST PAS pris en charge"); + } +} +function check_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + log_sizes(p[i]); + } +} +</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('Resource Timing 2', + '#dom-performanceresourcetiming-decodedbodysize', 'decodedBodySize')}}</td> + <td>{{Spec2('Resource Timing 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.decodedBodySize")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html b/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html new file mode 100644 index 0000000000..b2c3c38520 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html @@ -0,0 +1,86 @@ +--- +title: PerformanceResourceTiming.domainLookupEnd +slug: Web/API/PerformanceResourceTiming/domainLookupEnd +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - domainLookupEnd +translation_of: Web/API/PerformanceResourceTiming/domainLookupEnd +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>domainLookupEnd</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur ait terminé la recherche du nom de domaine pour la ressource.</p> + +<p>Si l'agent utilisateur dispose des informations de domaine dans le cache, <a href="/fr/docs/Web/API/PerformanceResourceTiming/domainLookupStart"><code>domainLookupStart</code></a> et <a href="/fr/docs/Web/API/PerformanceResourceTiming/domainLookupEnd"><code>domainLookupEnd</code></a> représentent les moments où l'agent utilisateur commence et termine la récupération des données de domaine dans le cache.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.domainLookupEnd;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure immédiatement après la fin de la recherche du nom de domaine de la ressource par le navigateur.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing', '#dom-performanceresourcetiming-domainlookupend', + 'domainLookupEnd')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.domainLookupEnd")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html b/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html new file mode 100644 index 0000000000..34f33fb6c9 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.domainLookupStart +slug: Web/API/PerformanceResourceTiming/domainLookupStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - domainLookupStart +translation_of: Web/API/PerformanceResourceTiming/domainLookupStart +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>domainLookupStart</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.domainLookupStart;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing', + '#dom-performanceresourcetiming-domainlookupstart', 'domainLookupStart')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.domainLookupStart")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html b/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html new file mode 100644 index 0000000000..ea3c0d6705 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html @@ -0,0 +1,83 @@ +--- +title: PerformanceResourceTiming.encodedBodySize +slug: Web/API/PerformanceResourceTiming/encodedBodySize +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - encodedBodySize +translation_of: Web/API/PerformanceResourceTiming/encodedBodySize +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété <strong><code>encodedBodySize</code></strong> en lecture seule représente la taille (en octets) reçue de la récupération (HTTP ou cache), du <em>corps de la donnée utile</em>, avant de supprimer tout codage de contenu appliqué.</p> + +<p>{{AvailableInWorkers}}</p> + +<p>Si la ressource est extraite d'un cache d'application ou d'une ressource locale, elle doit renvoyer la taille du corps de la charge utile avant de supprimer tout codage de contenu appliqué.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.encodedBodySize;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <code>number</code> représentant la taille (en octets) reçue de la récupération (HTTP ou cache), du <em>corps de la donnée utile</em>, avant de supprimer tout codage de contenu appliqué.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés de taille de tous les <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types</a> <code>"resource"</code> sont enregistrées.</p> + +<pre class="brush: js">function log_sizes(perfEntry){ + // Vérifie la prise en charge des propriétés PerformanceEntry.*size et imprime leurs valeurs + // si elles sont prises en charge + if ("decodedBodySize" in perfEntry) + console.log("decodedBodySize = " + perfEntry.decodedBodySize); + else + console.log("decodedBodySize = N'EST PAS pris en charge"); + + if ("encodedBodySize" in perfEntry) + console.log("encodedBodySize = " + perfEntry.encodedBodySize); + else + console.log("encodedBodySize = N'EST PAS pris en charge"); + + if ("transferSize" in perfEntry) + console.log("transferSize = " + perfEntry.transferSize); + else + console.log("transferSize = N'EST PAS pris en charge"); +} +function check_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + log_sizes(p[i]); + } +} +</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('Resource Timing 2', + '#dom-performanceresourcetiming-encodedbodysize', 'encodedBodySize')}}</td> + <td>{{Spec2('Resource Timing 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.encodedBodySize")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/fetchstart/index.html b/files/fr/web/api/performanceresourcetiming/fetchstart/index.html new file mode 100644 index 0000000000..2deb1ba0e9 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/fetchstart/index.html @@ -0,0 +1,86 @@ +--- +title: PerformanceResourceTiming.fetchStart +slug: Web/API/PerformanceResourceTiming/fetchStart +tags: +- API +- Property +- Propriété +- Reference +- Performance Web +- Resource Timing API +- fetchStart +translation_of: Web/API/PerformanceResourceTiming/fetchStart +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>fetchStart</code></strong> représente un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence à récupérer la ressource.</p> + +<p>S'il y a des redirections HTTP, la propriété renvoie le temps immédiatement avant que l'agent utilisateur ne commence à récupérer la ressource finale dans la redirection.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.fetchStart;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence à récupérer la ressource.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing', '#dom-performanceresourcetiming-fetchstart', + 'fetchStart')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.fetchStart")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/index.html b/files/fr/web/api/performanceresourcetiming/index.html new file mode 100644 index 0000000000..07f6f67147 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/index.html @@ -0,0 +1,118 @@ +--- +title: PerformanceResourceTiming +slug: Web/API/PerformanceResourceTiming +tags: + - API + - DOM + - Interface + - Reference + - Performance Web + - Resource Timing API +translation_of: Web/API/PerformanceResourceTiming +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="symmary">L'interface <strong><code>PerformanceResourceTiming</code></strong> permet de récupérer et d'analyser des données de synchronisation réseau détaillées concernant le chargement des <em>ressources</em> d'une application. Une application peut utiliser les mesures temporelles pour déterminer, par exemple, la durée nécessaire à l'extraction d'une ressource spécifique, telle qu'une <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, un élément <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a>, une image ou un script.</p> + +<p>Les propriétés de l'interface créent une <em>chronologie de chargement des ressources</em> avec un <a href="/fr/docs/Web/API/DOMHighResTimeStamp">timestamps haute résolution</a> pour les événements réseau tels que les heures de début et de fin de redirection, les heures de début de récupération, les heures de début et de fin de recherche DNS, les heures de début et de fin de réponse, etc. En outre, l'interface étend <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> avec d'autres propriétés qui fournissent des données sur la taille de la ressource extraite ainsi que le <em>type</em> de ressource qui a initié l'extraction.</p> + +<p>{{InheritanceDiagram}}</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Properties">Propriétés</h2> + +<p>Cette interface étend les propriétés <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes pour les types d'entrée de performance des ressources en les restreignant comme suit :</p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> {{readonlyInline}}</dt> + <dd>Retourne <code>"resource"</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a> {{readonlyInline}}</dt> + <dd>Retourne l'URL des ressources.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a> {{readonlyInline}}</dt> + <dd>Retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> de l'heure de début de la récupération d'une ressource. Cette valeur est équivalente à <a href="/fr/docs/Web/API/PerformanceResourceTiming/fetchStart"><code>PerformanceResourceTiming.fetchStart</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a> {{readonlyInline}}</dt> + <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui est la différence entre les propriétés <a href="/fr/docs/Web/API/PerformanceResourceTiming/responseEnd"><code>responseEnd</code></a> et <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a>.</dd> +</dl> + +<p>L'interface prend également en charge les propriétés suivantes, qui sont énumérées dans l'ordre temporel selon lequel elles sont enregistrées pour l'extraction d'une seule ressource. Une liste alphabétique est présentée dans la navigation, à gauche.</p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/initiatorType"><code>PerformanceResourceTiming.initiatorType</code></a> {{readonlyInline}}</dt> + <dd>Une chaîne de caractère <a href="/fr/docs/Web/API/DOMString"><code>string</code></a> représentant le <em>type</em> de ressource qui a initié l'entrée de performance, comme spécifié dans <a href="/fr/docs/Web/API/PerformanceResourceTiming/initiatorType"><code>PerformanceResourceTiming.initiatorType</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/nextHopProtocol"><code>PerformanceResourceTiming.nextHopProtocol</code></a> {{readonlyInline}}</dt> + <dd>Une chaîne de caractère <a href="/fr/docs/Web/API/DOMString"><code>string</code></a> représentant le <em>protocole réseau</em> utilisé pour récupérer la ressource, tel qu'identifié par le <a href="https://datatracker.ietf.org/doc/html/rfc7301">ALPN Protocol ID (RFC7301)</a>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/workerStart"><code>PerformanceResourceTiming.workerStart</code></a> {{readonlyInline}}</dt> + <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant de transmettre le <a href="/fr/docs/Web/API/FetchEvent"><code>FetchEvent</code></a> si un processus de Service Worker est déjà en cours, ou immédiatement avant de lancer le processus de Service Worker s'il n'est pas encore en cours. Si la ressource n'est pas interceptée par un Service Worker, la propriété retourne toujours 0.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/redirectStart"><code>PerformanceResourceTiming.redirectStart</code></a> {{readonlyInline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> qui représente l'heure de début de l'extraction qui déclenche la redirection.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/redirectEnd"><code>PerformanceResourceTiming.redirectEnd</code></a> {{readonlyInline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après la réception du dernier octet de la réponse de la dernière redirection.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/fetchStart"><code>PerformanceResourceTiming.fetchStart</code></a> {{readonlyInline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence à récupérer la ressource.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/domainLookupStart"><code>PerformanceResourceTiming.domainLookupStart</code></a> {{readonlyInline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/domainLookupEnd"><code>PerformanceResourceTiming.domainLookupEnd</code></a> {{readonlyInline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure immédiatement après la fin de la recherche du nom de domaine de la ressource par le navigateur.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/connectStart"><code>PerformanceResourceTiming.connectStart</code></a> {{readonlyInline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence à établir la connexion avec le serveur pour récupérer la ressource.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/connectEnd"><code>PerformanceResourceTiming.connectEnd</code></a> {{readonlyInline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après que le navigateur ait fini d'établir la connexion avec le serveur pour récupérer la ressource.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/secureConnectionStart"><code>PerformanceResourceTiming.secureConnectionStart</code></a> {{readonlyInline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne lance le processus de reconnaissance pour sécuriser la connexion en cours.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/requestStart"><code>PerformanceResourceTiming.requestStart</code></a> {{readonlyInline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence à demander la ressource au serveur.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/responseStart"><code>PerformanceResourceTiming.responseStart</code></a> {{readonlyInline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après que le navigateur ait reçu le premier octet de la réponse du serveur.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/responseEnd"><code>PerformanceResourceTiming.responseEnd</code></a> {{readonlyInline}}</dt> + <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après la réception par le navigateur du dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transfert, selon la première éventualité.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/transferSize"><code>PerformanceResourceTiming.transferSize</code></a> {{readonlyInline}}</dt> + <dd>Un nombre représentant la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus le corps des données utiles de la réponse.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/encodedBodySize"><code>PerformanceResourceTiming.encodedBodySize</code></a> {{readonlyInline}}</dt> + <dd>Un nombre représentant la taille (en octets) reçue de la récupération (HTTP ou cache), du <em>corps de la donnée</em>, avant de supprimer tout codage de contenu appliqué.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/decodedBodySize"><code>PerformanceResourceTiming.decodedBodySize</code></a> {{readonlyInline}}</dt> + <dd>Un nombre représentant la taille (en octets) reçue de la récupération (HTTP ou cache) du <em>message body</em>, après avoir retiré tout codage de contenu appliqué.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/serverTiming"><code>PerformanceResourceTiming.serverTiming</code></a> {{readonlyInline}}</dt> + <dd>Un tableau d'entrées <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a> contenant des mesures de synchronisation du serveur.</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/toJSON"><code>PerformanceResourceTiming.toJSON()</code></a></dt> + <dd>Renvoie une chaîne de caractère <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a>.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<p>Voir l'exemple dans <a href="/fr/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Utilisation de Resource Timing API</a>.</p> + +<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('Resource Timing', '#performanceresourcetiming', 'PerformanceResourceTiming')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/Resource_Timing_API">L'API <i>Resource Timing</i></a></li> + <li><a href="/fr/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Utilisation de l'API <i>Resource Timing</i></a></li> +</ul> diff --git a/files/fr/web/api/performanceresourcetiming/initiatortype/index.html b/files/fr/web/api/performanceresourcetiming/initiatortype/index.html new file mode 100644 index 0000000000..b63192a685 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/initiatortype/index.html @@ -0,0 +1,78 @@ +--- +title: PerformanceResourceTiming.initiatorType +slug: Web/API/PerformanceResourceTiming/initiatorType +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - initiatorType +translation_of: Web/API/PerformanceResourceTiming/initiatorType +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété <strong><code>initiatorType</code></strong> en lecture seule est une <a href="/fr/docs/Web/API/DOMString">chaîne de caractères</a> qui représente le <em>type</em> de ressource qui a initié l'événement de performance.</p> + +<p>La valeur de cette chaîne est la suivante:</p> + +<ul> + <li>Si l'initiateur est un <a href="/fr/docs/Web/API/Element"><code>Element</code></a>, la propriété retourne la propriété <a href="/fr/docs/Web/API/Node/localName"><code>localName</code></a> de l'élément.</li> + <li>Si l'initiateur est une ressource <a href="/fr/docs/Web/API/CSS"><code>CSS</code></a>, la propriété renvoie « <code>css</code> ».</li> + <li>Si l'initiateur est un objet <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, la propriété renvoie « <code>xmlhttprequest</code> ».</li> + <li>Si l'initiateur est un objet <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a>, la propriété renvoie une chaîne vide (<code>""</code>).</li> +</ul> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.initiatorType;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) représentant le <em>type</em> de ressource qui a initié l'événement de performance, comme spécifié ci-dessus.</p> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_initiatorType(p[i]); + } +} +function print_initiatorType(perfEntry) { + // Imprime la valeur initiatorType de cet objet d'entrée de performance + let value = "initiatorType" in perfEntry; + if (value) + console.log("... initiatorType = " + perfEntry.initiatorType); + else + console.log("... initiatorType = N'EST PAS pris en charge"); +} +</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('Resource Timing', + '#dom-performanceresourcetiming-initiatortype', 'initiatorType')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.initiatorType")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html b/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html new file mode 100644 index 0000000000..e08dab0889 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html @@ -0,0 +1,72 @@ +--- +title: PerformanceResourceTiming.nextHopProtocol +slug: Web/API/PerformanceResourceTiming/nextHopProtocol +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - nextHopProtocol +translation_of: Web/API/PerformanceResourceTiming/nextHopProtocol +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>nextHopProtocol</code></strong> est une <a href="/fr/docs/Web/API/DOMString">chaîne de caractères</a> représentant le <em>protocole réseau</em> utilisé pour récupérer la ressource, tel qu'identifié par le <a href="https://datatracker.ietf.org/doc/html/rfc7301">ALPN Protocol ID (RFC7301)</a>.</p> + +<p>Lorsqu'un proxy est utilisé, si une connexion tunnel est établie, cette propriété renvoie l'ID du protocole ALPN du protocole tunnelisé. Sinon, cette propriété renvoie l'ID du protocole ALPN du premier saut vers le proxy.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.nextHopProtocol;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>string</code></a> représentant le <em>protocole réseau</em> utilisé pour récupérer la ressource, tel qu'identifié par le <a href="https://datatracker.ietf.org/doc/html/rfc7301">ALPN Protocol ID (RFC7301)</a>.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant utilise la propriété <code>nextHopProtocol</code> :</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_nextHopProtocol(p[i]); + } +} +function print_nextHopProtocol(perfEntry) { + let value = "nextHopProtocol" in perfEntry; + if (value) + console.log("nextHopProtocol = " + perfEntry.nextHopProtocol); + else + console.log("nextHopProtocol = N'EST PAS pris en charge"); +} +</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('Resource Timing 2', + '#dom-performanceresourcetiming-nexthopprotocol', 'nextHopProtocol')}}</td> + <td>{{Spec2('Resource Timing 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.nextHopProtocol")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/redirectend/index.html b/files/fr/web/api/performanceresourcetiming/redirectend/index.html new file mode 100644 index 0000000000..e5474b37b9 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/redirectend/index.html @@ -0,0 +1,86 @@ +--- +title: PerformanceResourceTiming.redirectEnd +slug: Web/API/PerformanceResourceTiming/redirectEnd +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - redirectEnd +translation_of: Web/API/PerformanceResourceTiming/redirectEnd +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>redirectEnd</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après la réception du dernier octet de la réponse de la dernière redirection.</p> + +<p>Lors de l'extraction d'une ressource, s'il y a plusieurs redirections HTTP, que l'une d'entre elles a une origine différente du document actuel, et que l'algorithme de vérification d'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure immédiatement après la réception du dernier octet de la réponse de la dernière redirection ; sinon, zéro est retourné.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.redirectEnd;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après la réception du dernier octet de la réponse de la dernière redirection.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing', '#dom-performanceresourcetiming-redirectend', + 'redirectEnd')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.redirectEnd")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/redirectstart/index.html b/files/fr/web/api/performanceresourcetiming/redirectstart/index.html new file mode 100644 index 0000000000..626038c80b --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/redirectstart/index.html @@ -0,0 +1,86 @@ +--- +title: PerformanceResourceTiming.redirectStart +slug: Web/API/PerformanceResourceTiming/redirectStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - redirectStart +translation_of: Web/API/PerformanceResourceTiming/redirectStart +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>redirectStart</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant l'instant du début de la récupération qui initie la redirection.</p> + +<p>S'il y a des redirections HTTP lors de l'extraction de la ressource et si l'une des redirections ne provient pas de la même origine que le document actuel, mais que l'algorithme de vérification de l'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure de début de l'extraction qui initie la redirection ; sinon, zéro est renvoyé.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.redirectStart;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant l'heure de début de l'extraction qui déclenche la redirection.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing', '#dom-performanceresourcetiming-redirectstart', + 'redirectStart')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.redirectStart")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/requeststart/index.html b/files/fr/web/api/performanceresourcetiming/requeststart/index.html new file mode 100644 index 0000000000..de0bec6a29 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/requeststart/index.html @@ -0,0 +1,86 @@ +--- +title: PerformanceResourceTiming.requestStart +slug: Web/API/PerformanceResourceTiming/requestStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - requestStart +translation_of: Web/API/PerformanceResourceTiming/requestStart +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>requestStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> du moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur, au cache ou à la ressource locale. Si la connexion de transport échoue et que le navigateur retire la demande, la valeur renvoyée sera le début de la nouvelle demande.</p> + +<p>Il n'y a pas de propriété de fin (« <em>requestEnd</em> ») correspondante pour <code>requestStart</code>.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.requestStart;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant le moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur.</p> + +<h2 id="Example">Example</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing', '#dom-performanceresourcetiming-requeststart', + 'requestStart')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.requestStart")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/responseend/index.html b/files/fr/web/api/performanceresourcetiming/responseend/index.html new file mode 100644 index 0000000000..a87722b213 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/responseend/index.html @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.responseEnd +slug: Web/API/PerformanceResourceTiming/responseEnd +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - responseEnd +translation_of: Web/API/PerformanceResourceTiming/responseEnd +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>responseEnd</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur a reçu le dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui se produit en premier.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.responseEnd;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après la réception par le navigateur du dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui arrive en premier.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing', '#dom-performanceresourcetiming-responseend', + 'responseEnd')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.responseEnd")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/responsestart/index.html b/files/fr/web/api/performanceresourcetiming/responsestart/index.html new file mode 100644 index 0000000000..bf531b5c93 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/responsestart/index.html @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.responseStart +slug: Web/API/PerformanceResourceTiming/responseStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - responseStart +translation_of: Web/API/PerformanceResourceTiming/responseStart +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>responseStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.responseStart;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après que le navigateur ait reçu le premier octet de la réponse du serveur.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing', '#dom-performanceresourcetiming-responsestart', + 'responseStart')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.responseStart")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html b/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html new file mode 100644 index 0000000000..605fa47e55 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html @@ -0,0 +1,85 @@ +--- +title: PerformanceResourceTiming.secureConnectionStart +slug: Web/API/PerformanceResourceTiming/secureConnectionStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - secureConnectionStart +translation_of: Web/API/PerformanceResourceTiming/secureConnectionStart +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>secureConnectionStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence le processus de poignée de main (<i>handshake</i>) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, la propriété renvoie zéro.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.secureConnectionStart;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Si la ressource est récupérée par le biais d'une connexion sécurisée, un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne lance le processus de poignée de main (<i>handshake</i>) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, cette propriété renvoie zéro.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing', + '#dom-performanceresourcetiming-secureconnectionstart', 'secureConnectionStart')}} + </td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.secureConnectionStart")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/servertiming/index.html b/files/fr/web/api/performanceresourcetiming/servertiming/index.html new file mode 100644 index 0000000000..7ff22aa4fa --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/servertiming/index.html @@ -0,0 +1,51 @@ +--- +title: PerformanceResourceTiming.serverTiming +slug: Web/API/PerformanceResourceTiming/serverTiming +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - SecureContextOnly + - serverTiming +translation_of: Web/API/PerformanceResourceTiming/serverTiming +--- +<div>{{APIRef("Resource Timing API")}} {{securecontext_header}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>serverTiming</code></strong> retourne un tableau d'entrées <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a> contenant des mesures de synchronisation du serveur.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.serverTiming;</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('Server Timing','#servertiming-attribute', 'serverTiming')}}</td> + <td>{{Spec2('Server Timing')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.serverTiming")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a></li> + <li><a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a></li> +</ul> diff --git a/files/fr/web/api/performanceresourcetiming/tojson/index.html b/files/fr/web/api/performanceresourcetiming/tojson/index.html new file mode 100644 index 0000000000..224bf123bc --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/tojson/index.html @@ -0,0 +1,67 @@ +--- +title: PerformanceResourceTiming.toJSON() +slug: Web/API/PerformanceResourceTiming/toJSON +tags: + - API + - Method + - Méthode + - Reference + - Performance Web + - Resource Timing API + - toJSON() +translation_of: Web/API/PerformanceResourceTiming/toJSON +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La méthode <strong><code>toJSON()</code></strong> est un <em>sérialiseur</em> qui retourne une représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>json</var> = <var>resourcePerfEntry</var>.toJSON();</pre> + +<h3 id="Arguments">Arguments</h3> + +<p>Aucun.</p> + +<h3 id="Return_value">Valeur de retour</h3> + +<dl> + <dt><code>json</code></dt> + <dd>Un objet JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a> comme une carte avec des entrées de l'interface héritée la plus proche et avec des entrées pour chacun des attributs sérialisables.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">// Obtient une entrée de performance des ressources +let perfEntries = performance.getEntriesByType("resource"); +let entry = perfEntries[0]; + +// Récupère le JSON et l'enregistre +let json = entry.toJSON(); +let s = JSON.stringify(json); +console.log("PerformanceEntry.toJSON = " + s); +</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('Resource Timing 2', '#dom-performanceresourcetiming-tojson', + 'toJSON')}}</td> + <td>{{Spec2('Resource Timing 2')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.toJSON")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/transfersize/index.html b/files/fr/web/api/performanceresourcetiming/transfersize/index.html new file mode 100644 index 0000000000..87dfa3535e --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/transfersize/index.html @@ -0,0 +1,83 @@ +--- +title: PerformanceResourceTiming.transferSize +slug: Web/API/PerformanceResourceTiming/transferSize +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - transferSize +translation_of: Web/API/PerformanceResourceTiming/transferSize +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>transferSize</code></strong> représente la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la charge utile du corps de la réponse (comme défini par la <a href="https://httpwg.github.io/specs/rfc7230.html#message.body">RFC 7230</a>).</p> + +<p>{{AvailableInWorkers}}</p> + +<p>Si la ressource est extraite d'un cache local ou s'il s'agit d'une ressource d'origine croisée, cette propriété renvoie zéro.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.transferSize;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <code>number</code> représentant la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la taille <a href="https://httpwg.github.io/specs/rfc7230.html#message.body">de la charge utile du corps de la réponse</a> (RFC7230).</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, les valeurs des propriétés de taille de tous les <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types</a> <code>"resource"</code> sont enregistrées.</p> + +<pre class="brush: js">function log_sizes(perfEntry){ + // Vérifie la prise en charge des propriétés PerformanceEntry.*size et imprime leurs valeurs + // si elles sont prises en charge + if ("decodedBodySize" in perfEntry) + console.log("decodedBodySize = " + perfEntry.decodedBodySize); + else + console.log("decodedBodySize = N'EST PAS pris en charge"); + + if ("encodedBodySize" in perfEntry) + console.log("encodedBodySize = " + perfEntry.encodedBodySize); + else + console.log("encodedBodySize = N'EST PAS pris en charge"); + + if ("transferSize" in perfEntry) + console.log("transferSize = " + perfEntry.transferSize); + else + console.log("transferSize = N'EST PAS pris en charge"); +} +function check_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + log_sizes(p[i]); + } +} +</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('Resource Timing 2', '#dom-performanceresourcetiming-transfersize', + 'transferSize')}}</td> + <td>{{Spec2('Resource Timing 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.transferSize")}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/workerstart/index.html b/files/fr/web/api/performanceresourcetiming/workerstart/index.html new file mode 100644 index 0000000000..086f82b9b7 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/workerstart/index.html @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.workerStart +slug: Web/API/PerformanceResourceTiming/workerStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - workerStart +translation_of: Web/API/PerformanceResourceTiming/workerStart +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>workerStart</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant l'envoi du <a href="/fr/docs/Web/API/FetchEvent"><code>FetchEvent</code></a> si un processus de <i>service worker</i> est déjà en cours, ou immédiatement avant le démarrage du processus de <i>service worker</i> s'il n'est pas déjà en cours. Si la ressource n'est pas interceptée par un <i>service worker</i>, la propriété renvoie toujours 0.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>resource</var>.workerStart;</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant de transmettre le <a href="/fr/docs/Web/API/FetchEvent"><code>FetchEvent</code></a> si un processus de <i>service worker</i> est déjà en cours, ou immédiatement avant de lancer le processus de <i>service worker</i> s'il n'est pas encore en cours. Si la ressource n'est pas interceptée par un <i>service worker</i>, la propriété retourne toujours 0.</p> + +<h2 id="Example">Exemple</h2> + +<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p> + +<pre class="brush: js">function print_PerformanceEntries() { + // Utilise getEntriesByType() pour obtenir uniquement les événements "resource" + let p = performance.getEntriesByType("resource"); + for (let i = 0; i < p.length; i++) { + print_start_and_end_properties(p[i]); + } +} +function print_start_and_end_properties(perfEntry) { + // Imprime les horodatages des propriétés *start et *end + properties = ["connectStart", "connectEnd", + "domainLookupStart", "domainLookupEnd", + "fetchStart", + "redirectStart", "redirectEnd", + "requestStart", + "responseStart", "responseEnd", + "secureConnectionStart"]; + + for (let i = 0; i < properties.length; i++) { + // vérifie chaque propriété + let supported = properties[i] in perfEntry; + if (supported) { + let value = perfEntry[properties[i]]; + console.log("... " + properties[i] + " = " + value); + } else { + console.log("... " + properties[i] + " = N'EST PAS pris en charge"); + } + } +} +</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('Resource Timing 2', '#dom-performanceresourcetiming-workerstart', + 'workerStart')}}</td> + <td>{{Spec2('Resource Timing 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceResourceTiming.workerStart")}}</p> diff --git a/files/fr/web/api/performanceservertiming/description/index.html b/files/fr/web/api/performanceservertiming/description/index.html new file mode 100644 index 0000000000..15919ceccd --- /dev/null +++ b/files/fr/web/api/performanceservertiming/description/index.html @@ -0,0 +1,51 @@ +--- +title: PerformanceServerTiming.description +slug: Web/API/PerformanceServerTiming/description +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - description +translation_of: Web/API/PerformanceServerTiming/description +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>description</code></strong> retourne une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) décrivant la métrique spécifiée par le serveur, ou une chaîne vide.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>serverTiming</var>.description;</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('Server Timing','#dom-performanceservertiming-description', + 'description')}}</td> + <td>{{Spec2('Server Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceServerTiming.description")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a></li> + <li><a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a></li> +</ul> diff --git a/files/fr/web/api/performanceservertiming/duration/index.html b/files/fr/web/api/performanceservertiming/duration/index.html new file mode 100644 index 0000000000..dc61670775 --- /dev/null +++ b/files/fr/web/api/performanceservertiming/duration/index.html @@ -0,0 +1,51 @@ +--- +title: PerformanceServerTiming.duration +slug: Web/API/PerformanceServerTiming/duration +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - duration +translation_of: Web/API/PerformanceServerTiming/duration +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>duration</code></strong> retourne un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur <code>0,0</code>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>serverTiming</var>.duration;</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('Server Timing','#dom-performanceservertiming-duration', + 'duration')}}</td> + <td>{{Spec2('Server Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceServerTiming.duration")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a></li> + <li><a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a></li> +</ul> diff --git a/files/fr/web/api/performanceservertiming/index.html b/files/fr/web/api/performanceservertiming/index.html new file mode 100644 index 0000000000..6f9bbd6e6f --- /dev/null +++ b/files/fr/web/api/performanceservertiming/index.html @@ -0,0 +1,98 @@ +--- +title: PerformanceServerTiming +slug: Web/API/PerformanceServerTiming +tags: + - API + - Interface + - Reference + - Performance Web + - Resource Timing API +translation_of: Web/API/PerformanceServerTiming +--- +<div>{{APIRef("Resource Timing API")}} {{securecontext_header}}</div> + +<p class="summary">L'interface <strong><code>PerformanceServerTiming</code></strong> présente des métriques de serveur qui sont envoyées avec la réponse dans l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a> dans l'en-tête HTTP.</p> + +<p>Cette interface est limitée à la même origine, mais vous pouvez utiliser l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Timing-Allow-Origin"><code>Timing-Allow-Origin</code></a> pour spécifier les domaines qui sont autorisés à accéder aux paramètres du serveur. Notez que cette interface n'est disponible que dans des contextes sécurisés (HTTPS) dans certains navigateurs.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Properties">Propriétés</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceServerTiming/description"><code>PerformanceServerTiming.description</code></a>{{readonlyInline}}</dt> + <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> décrivant la métrique spécifiée par le serveur, ou une chaîne vide.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceServerTiming/duration"><code>PerformanceServerTiming.duration</code></a>{{readonlyInline}}</dt> + <dd>Un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur <code>0.0</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceServerTiming/name"><code>PerformanceServerTiming.name</code></a>{{readonlyInline}}</dt> + <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> avec le nom de la métrique spécifiée par le serveur.</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceServerTiming/toJSON()"><code>PerformanceServerTiming.toJSON()</code></a></dt> + <dd>Retourne une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la représentation JSON de l'objet <code>PerformanceServerTiming</code>.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<p>Étant donné un serveur qui envoie l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a>, par exemple un serveur node.js comme celui-ci :</p> + +<pre class="brush: js">const http = require('http'); + +function requestHandler(request, response) { + const headers = { + 'Server-Timing': ` + cache;desc="Cache Read";dur=23.2, + db;dur=53, + app;dur=47.2 + `.replace(/\n/g, '') + }; + response.writeHead(200, headers); + response.write(''); + return setTimeout(_ => { + response.end(); + }, 1000) +}; + +http.createServer(requestHandler).listen(3000).on('error', console.error);</pre> + +<p>Les entrées <code>PerformanceServerTiming</code> sont désormais observables depuis JavaScript via la propriété <a href="/fr/docs/Web/API/PerformanceResourceTiming/serverTiming"><code>PerformanceResourceTiming.serverTiming</code></a> :</p> + +<pre class="brush: js">let entries = performance.getEntriesByType('resource'); +console.log(entries[0].serverTiming); +// 0: PerformanceServerTiming {name: "cache", duration: 23.2, description: "Cache Read"} +// 1: PerformanceServerTiming {name: "db", duration: 53, description: ""} +// 2: PerformanceServerTiming {name: "app", duration: 47.2, description: ""} +</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('Server Timing','#the-performanceservertiming-interface', 'PerformanceServerTiming')}}</td> + <td>{{Spec2('Server Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceServerTiming")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a></li> + <li><a href="/fr/docs/Web/API/PerformanceResourceTiming/serverTiming"><code>PerformanceResourceTiming.serverTiming</code></a></li> +</ul> diff --git a/files/fr/web/api/performanceservertiming/name/index.html b/files/fr/web/api/performanceservertiming/name/index.html new file mode 100644 index 0000000000..4b8ec5b587 --- /dev/null +++ b/files/fr/web/api/performanceservertiming/name/index.html @@ -0,0 +1,50 @@ +--- +title: PerformanceServerTiming.name +slug: Web/API/PerformanceServerTiming/name +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - name +translation_of: Web/API/PerformanceServerTiming/name +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La propriété en lecture seule <strong><code>name</code></strong> retourne une valeur <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est le nom de la métrique spécifiée par le serveur.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><var>serverTiming</var>.name;</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('Server Timing','#dom-performanceservertiming-name', 'name')}}</td> + <td>{{Spec2('Server Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceServerTiming.name")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a></li> + <li><a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a></li> +</ul> diff --git a/files/fr/web/api/performanceservertiming/tojson/index.html b/files/fr/web/api/performanceservertiming/tojson/index.html new file mode 100644 index 0000000000..0b7773e322 --- /dev/null +++ b/files/fr/web/api/performanceservertiming/tojson/index.html @@ -0,0 +1,55 @@ +--- +title: PerformanceServerTiming.toJSON() +slug: Web/API/PerformanceServerTiming/toJSON +tags: + - API + - Method + - Méthode + - Reference + - Performance Web + - Resource Timing API + - toJSON +translation_of: Web/API/PerformanceServerTiming/toJSON +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="summary">La méthode <strong><code>toJSON()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a> retourne une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>json</var> = PerformanceServerTiming.toJSON()</pre> + +<h3 id="Parameters">Paramètres</h3> + +<p>Aucun.</p> + +<h3 id="Return_value">Valeur de retour</h3> + +<dl> + <dt><code>json</code></dt> + <dd>Une chaîne de caractères JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a>.</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('Server Timing','#dom-performanceservertiming-tojson','toJSON')}} + </td> + <td>{{Spec2('Server Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceServerTiming.toJSON")}}</p> diff --git a/files/fr/web/api/performancetiming/connectend/index.html b/files/fr/web/api/performancetiming/connectend/index.html new file mode 100644 index 0000000000..6ac529c501 --- /dev/null +++ b/files/fr/web/api/performancetiming/connectend/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.connectEnd +slug: Web/API/PerformanceTiming/connectEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - connectEnd +translation_of: Web/API/PerformanceTiming/connectEnd +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>connectEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la connexion a été ouverte en réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est recommencé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>. Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.connectEnd;</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('Navigation Timing', '#dom-performancetiming-connectend', + 'PerformanceTiming.connectEnd')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.connectEnd")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/connectstart/index.html b/files/fr/web/api/performancetiming/connectstart/index.html new file mode 100644 index 0000000000..bd8848d20a --- /dev/null +++ b/files/fr/web/api/performancetiming/connectstart/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.connectStart +slug: Web/API/PerformanceTiming/connectStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - connectStart +translation_of: Web/API/PerformanceTiming/connectStart +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>connectStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la demande d'ouverture de connexion est envoyée au réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, le dernier moment de début d'établissement de la connexion est donné. Si une connexion persistante est utilisée, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.connectStart;</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('Navigation Timing', '#dom-performancetiming-connectstart', + 'PerformanceTiming.connectStart')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.connectStart")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/domainlookupend/index.html b/files/fr/web/api/performancetiming/domainlookupend/index.html new file mode 100644 index 0000000000..6bddef76dd --- /dev/null +++ b/files/fr/web/api/performancetiming/domainlookupend/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.domainLookupEnd +slug: Web/API/PerformanceTiming/domainLookupEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domainLookupEnd +translation_of: Web/API/PerformanceTiming/domainLookupEnd +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>domainLookupEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domainLookupEnd;</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('Navigation Timing', '#dom-performancetiming-domainlookupend', + 'PerformanceTiming.domainLookupEnd')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.domainLookupEnd")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/domainlookupstart/index.html b/files/fr/web/api/performancetiming/domainlookupstart/index.html new file mode 100644 index 0000000000..d35d4eac99 --- /dev/null +++ b/files/fr/web/api/performancetiming/domainlookupstart/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.domainLookupStart +slug: Web/API/PerformanceTiming/domainLookupStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domainLookupStart +translation_of: Web/API/PerformanceTiming/domainLookupStart +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>domainLookupStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domainLookupStart;</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('Navigation Timing', '#dom-performancetiming-domainlookupstart', + 'PerformanceTiming.domainLookupStart')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.domainLookupStart")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/domcomplete/index.html b/files/fr/web/api/performancetiming/domcomplete/index.html new file mode 100644 index 0000000000..a8b3d0b028 --- /dev/null +++ b/files/fr/web/api/performancetiming/domcomplete/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.domComplete +slug: Web/API/PerformanceTiming/domComplete +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domComplete +translation_of: Web/API/PerformanceTiming/domComplete +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domComplete"><code>PerformanceNavigationTiming.domComplete</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>domComplete</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>'complete'</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domComplete;</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('Navigation Timing', '#dom-performancetiming-domcomplete', + 'PerformanceTiming.domComplete')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.domComplete")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html b/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html new file mode 100644 index 0000000000..d09d8e22c6 --- /dev/null +++ b/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html @@ -0,0 +1,58 @@ +--- +title: PerformanceTiming.domContentLoadedEventEnd +slug: Web/API/PerformanceTiming/domContentLoadedEventEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domContentLoadedEventEnd +translation_of: Web/API/PerformanceTiming/domContentLoadedEventEnd +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd"><code>PerformanceNavigationTiming.domContentLoadedEventEnd</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>domContentLoadedEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste après que tous les scripts qui doivent être exécutés le plus rapidement possible, dans l'ordre ou non, aient été exécutés.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domContentLoadedEventEnd;</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('Navigation Timing', + '#dom-performancetiming-domcontentloadedeventend', + 'PerformanceTiming.domContentLoadedEventEnd')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.domContentLoadedEventEnd")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html b/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html new file mode 100644 index 0000000000..e19dca26ee --- /dev/null +++ b/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html @@ -0,0 +1,58 @@ +--- +title: PerformanceTiming.domContentLoadedEventStart +slug: Web/API/PerformanceTiming/domContentLoadedEventStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domContentLoadedEventStart +translation_of: Web/API/PerformanceTiming/domContentLoadedEventStart +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventStart"><code>PerformanceNavigationTiming.domContentLoadedEventStart</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>domContentLoadedEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste avant que le parseur n'envoie l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a>, c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après le parsing aient été exécutés.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domContentLoadedEventStart;</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('Navigation Timing', + '#dom-performancetiming-domcontentloadedeventstart', + 'PerformanceTiming.domContentLoadedEventStart')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.domContentLoadedEventStart")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/dominteractive/index.html b/files/fr/web/api/performancetiming/dominteractive/index.html new file mode 100644 index 0000000000..87e2648a84 --- /dev/null +++ b/files/fr/web/api/performancetiming/dominteractive/index.html @@ -0,0 +1,61 @@ +--- +title: PerformanceTiming.domInteractive +slug: Web/API/PerformanceTiming/domInteractive +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domInteractive +translation_of: Web/API/PerformanceTiming/domInteractive +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domInteractive"><code>PerformanceNavigationTiming.domInteractive</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>domInteractive</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>"interactive"</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</p> + +<p>Cette propriété peut être utilisée pour mesurer la vitesse de chargement des sites Web que les utilisateurs <em>ressentent</em>. Néanmoins, il y a quelques mises en garde qui se produisent si des scripts bloquent le rendu et ne sont pas chargés de manière asynchrone ou avec des polices Web personnalisées. <a href="http://www.stevesouders.com/blog/2015/08/07/dominteractive-is-it-really/">Vérifiez si vous êtes dans l'un de ces cas</a> avant d'utiliser cette propriété comme un proxy pour l'expérience utilisateur de la vitesse de chargement d'un site Web.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domInteractive;</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('Navigation Timing', '#dom-performancetiming-dominteractive', + 'PerformanceTiming.domInteractive')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.domInteractive")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> + <li>L'article « <a href="http://www.stevesouders.com/blog/2015/08/07/dominteractive-is-it-really/"> + domInteractive: is it? really?</a> <small>(en)</small> » explique quand vous pouvez utiliser cette propriété comme un proxy pour l'expérience utilisateur du chargement d'un site Web.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/domloading/index.html b/files/fr/web/api/performancetiming/domloading/index.html new file mode 100644 index 0000000000..7e252ffe86 --- /dev/null +++ b/files/fr/web/api/performancetiming/domloading/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.domLoading +slug: Web/API/PerformanceTiming/domLoading +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domLoading +translation_of: Web/API/PerformanceTiming/domLoading +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>domLoading</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a commencé son travail, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>"loading"</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est déclenché.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domLoading;</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('Navigation Timing', '#dom-performancetiming-domloading', + 'PerformanceTiming.domLoading')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.domLoading")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/fetchstart/index.html b/files/fr/web/api/performancetiming/fetchstart/index.html new file mode 100644 index 0000000000..5b8193e731 --- /dev/null +++ b/files/fr/web/api/performancetiming/fetchstart/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.fetchStart +slug: Web/API/PerformanceTiming/fetchStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - fetchStart +translation_of: Web/API/PerformanceTiming/fetchStart +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>fetchStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur est prêt à aller chercher le document en utilisant une requête HTTP. Ce moment est <em>avant</em> la vérification de tout cache d'application.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performance.timing</var>.fetchStart;</pre> + +<h2 id="Specifications">Specifications</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('Navigation Timing', '#dom-performancetiming-fetchstart', + 'PerformanceTiming.fetchStart')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.fetchStart")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/index.html b/files/fr/web/api/performancetiming/index.html new file mode 100644 index 0000000000..a743e13d51 --- /dev/null +++ b/files/fr/web/api/performancetiming/index.html @@ -0,0 +1,117 @@ +--- +title: PerformanceTiming +slug: Web/API/PerformanceTiming +tags: + - API + - Backwards compatibility + - Deprecated + - Interface + - Navigation Timing + - Navigation Timing API + - Optimization + - Performance + - Reference + - Timing + - legacy +translation_of: Web/API/PerformanceTiming +--- +<div>{{APIRef("Navigation Timing")}}</div> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'interface <strong><code>PerformanceTiming</code></strong> est une interface héritée conservée pour la rétrocompatibilité et contient des propriétés qui offrent des informations sur la chronologie des performances pour divers événements qui se produisent pendant le chargement et l'utilisation de la page actuelle. Vous obtenez un objet <code>PerformanceTiming</code> décrivant votre page en utilisant la propriété <a href="/fr/docs/Web/API/Performance/timing"><code>window.performance.timing</code></a>.</p> + +<h2 id="Properties">Propriétés</h2> + +<p><em>L'interface <code>PerformanceTiming</code> n'hérite d'aucune propriété.</em></p> + +<p>Ces propriétés décrivent chacune l'heure à laquelle un point particulier du processus de chargement de la page a été atteint. Certaines correspondent à des événements DOM, d'autres décrivent l'heure à laquelle les opérations internes du navigateur ont eu lieu.</p> + +<p>Chaque heure est fournie sous la forme d'une <a href="https://fr.wikipedia.org/wiki/Heure_Unix">heure Unix</a> (<code>unsigned long long</code>) représentant le moment, en millisecondes depuis l'époque UNIX.</p> + +<p>Ces propriétés sont énumérées dans l'ordre dans lequel elles apparaissent au cours du processus de navigation.</p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/navigationStart"><code>PerformanceTiming.navigationStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque le prompt de déchargement se termine sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que <code>PerformanceTiming.fetchStart</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/unloadEventStart"><code>PerformanceTiming.unloadEventStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque l'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> a été lancé, indiquant l'heure à laquelle le document précédent dans la fenêtre a commencé à se décharger. S'il n'y a pas de document précédent, ou si le document précédent ou l'une des redirections nécessaires n'est pas de la même origine, la valeur retournée est <code>0</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/unloadEventEnd"><code>PerformanceTiming.unloadEventEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque le gestionnaire d'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est <code>0</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/redirectStart"><code>PerformanceTiming.redirectStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Quand la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur retournée est <code>0</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/redirectEnd"><code>PerformanceTiming.redirectEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'a pas la même origine, la valeur retournée est <code>0</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque le navigateur est prêt à récupérer le document à l'aide d'une requête HTTP. Ce moment est <em>avant</em> la vérification de tout cache d'application.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/domainLookupStart"><code>PerformanceTiming.domainLookupStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque la recherche du domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <code>PerformanceTiming.fetchStart</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/domainLookupEnd"><code>PerformanceTiming.domainLookupEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque la recherche du domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <code>PerformanceTiming.fetchStart</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/connectStart"><code>PerformanceTiming.connectStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque la demande d'ouverture d'une connexion est envoyée au réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est relancé, la dernière heure de début d'établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que <code>PerformanceTiming.fetchStart</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/connectEnd"><code>PerformanceTiming.connectEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque la connexion est ouverte sur le réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que <code>PerformanceTiming.fetchStart</code>. Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/secureConnectionStart"><code>PerformanceTiming.secureConnectionStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque le handshake de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, il retourne <code>0</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/requestStart"><code>PerformanceTiming.requestStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque le navigateur a envoyé la requête pour obtenir le document réel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la demande et que la connexion est rouverte, cette propriété sera définie sur l'heure correspondant à la nouvelle demande.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/responseStart"><code>PerformanceTiming.responseStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque le navigateur a reçu le premier octet de la réponse, du serveur ou d'un cache, ou d'une ressource locale.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/responseEnd"><code>PerformanceTiming.responseEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur, le cache ou une ressource locale.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/domLoading"><code>PerformanceTiming.domLoading</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque l'analyseur syntaxique a commencé son travail, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>'loading'</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est déclenché.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/domInteractive"><code>PerformanceTiming.domInteractive</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque l'analyseur syntaxique a terminé son travail sur le document principal, c'est à ce moment que son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>'interactive'</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/domContentLoadedEventStart"><code>PerformanceTiming.domContentLoadedEventStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Juste avant que l'analyseur syntaxique envoie l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a>, c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après l'analyse syntaxique aient été exécutés.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/domContentLoadedEventEnd"><code>PerformanceTiming.domContentLoadedEventEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>C'est-à-dire juste après que tous les scripts qui doivent être exécutés dès que possible, dans l'ordre ou non, aient été exécutés.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/domComplete"><code>PerformanceTiming.domComplete</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque l'analyseur syntaxique a terminé son travail sur le document principal, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>'complete'</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/loadEventStart"><code>PerformanceTiming.loadEventStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Quand l'événement <a href="/fr/docs/Web/API/Window/load_event"><code>load</code></a> a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne <code>0</code>.</dd> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/loadEventEnd"><code>PerformanceTiming.loadEventEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Lorsque le gestionnaire d'événement <a href="/fr/docs/Web/API/Window/load_event"><code>load</code></a> s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne <code>0</code>.</dd> +</dl> + +<h2 id="Methods">Méthodes</h2> + +<p><em>L'interface <code>PerformanceTiming</code> n'hérite d'aucune méthode.</em></p> + +<dl> + <dt><a href="/fr/docs/Web/API/PerformanceTiming/toJSON"><code>PerformanceTiming.toJSON()</code></a> {{non-Standard_Inline}} {{deprecated_inline}}</dt> + <dd>Retourne un <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON">objet JSON</a> représentant cet objet <code>PerformanceTiming</code>.</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('Navigation Timing', '#performancetiming', 'PerformanceTiming')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>La propriété <a href="/fr/docs/Web/API/Performance/timing"><code>Performance.timing</code></a> qui crée un tel objet.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/loadeventend/index.html b/files/fr/web/api/performancetiming/loadeventend/index.html new file mode 100644 index 0000000000..46df8ff041 --- /dev/null +++ b/files/fr/web/api/performancetiming/loadeventend/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.loadEventEnd +slug: Web/API/PerformanceTiming/loadEventEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - loadEventEnd +translation_of: Web/API/PerformanceTiming/loadEventEnd +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd"><code>PerformanceNavigationTiming.loadEventEnd</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>loadEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement <a href="/fr/docs/Web/API/Document/load_event"><code>load</code></a> s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne <code>0</code>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.loadEventEnd;</pre> + +<h2 id="Specifications">Specifications</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('Navigation Timing', '#dom-performancetiming-loadedeventend', + 'PerformanceTiming.loadEventEnd')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.loadEventEnd")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/loadeventstart/index.html b/files/fr/web/api/performancetiming/loadeventstart/index.html new file mode 100644 index 0000000000..037c50dbe1 --- /dev/null +++ b/files/fr/web/api/performancetiming/loadeventstart/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.loadEventStart +slug: Web/API/PerformanceTiming/loadEventStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - loadEventStart +translation_of: Web/API/PerformanceTiming/loadEventStart +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventStart"><code>PerformanceNavigationTiming.loadEventStart</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>loadEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement <a href="/fr/docs/Web/API/Document/load_event"><code>load</code></a> a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne <code>0</code>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.loadEventStart;</pre> + +<h2 id="Specifications">Specifications</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('Navigation Timing', '#dom-performancetiming-loadeventstart', + 'PerformanceTiming.loadEventStart')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.loadEventStart")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/navigationstart/index.html b/files/fr/web/api/performancetiming/navigationstart/index.html new file mode 100644 index 0000000000..1ce9e75b82 --- /dev/null +++ b/files/fr/web/api/performancetiming/navigationstart/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.navigationStart +slug: Web/API/PerformanceTiming/navigationStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - navigationStart +translation_of: Web/API/PerformanceTiming/navigationStart +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>navigationStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste après la fin de l'invite de déchargement sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.navigationStart;</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('Navigation Timing', '#dom-performancetiming-navigationstart', + 'PerformanceTiming.navigationStart')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.navigationStart")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/performancetiming/redirectend/index.html b/files/fr/web/api/performancetiming/redirectend/index.html new file mode 100644 index 0000000000..84cea2911a --- /dev/null +++ b/files/fr/web/api/performancetiming/redirectend/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.redirectEnd +slug: Web/API/PerformanceTiming/redirectEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - redirectEnd +translation_of: Web/API/PerformanceTiming/redirectEnd +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>redirectEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est <code>0</code>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.redirectEnd;</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('Navigation Timing', '#dom-performancetiming-redirectend', + 'PerformanceTiming.redirectEnd')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.redirectEnd")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/redirectstart/index.html b/files/fr/web/api/performancetiming/redirectstart/index.html new file mode 100644 index 0000000000..35bdf3f8db --- /dev/null +++ b/files/fr/web/api/performancetiming/redirectstart/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.redirectStart +slug: Web/API/PerformanceTiming/redirectStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - redirectStart +translation_of: Web/API/PerformanceTiming/redirectStart +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>redirectStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est <code>0</code>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.redirectStart;</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('Navigation Timing', '#dom-performancetiming-redirectstart', + 'PerformanceTiming.redirectStart')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.redirectStart")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/requeststart/index.html b/files/fr/web/api/performancetiming/requeststart/index.html new file mode 100644 index 0000000000..96ce2e454a --- /dev/null +++ b/files/fr/web/api/performancetiming/requeststart/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.requestStart +slug: Web/API/PerformanceTiming/requestStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - requestStart +translation_of: Web/API/PerformanceTiming/requestStart +--- +<p>{{ APIRef("PerformanceTiming") }}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>requestStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a envoyé la requête pour obtenir le document actuel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la requête et que la connexion est rouverte, cette propriété sera définie sur le temps correspondant à la nouvelle requête.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.requestStart;</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('Navigation Timing', '#dom-performancetiming-requeststart', + 'PerformanceTiming.requestStart')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.requestStart")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/responseend/index.html b/files/fr/web/api/performancetiming/responseend/index.html new file mode 100644 index 0000000000..b4b1d436d3 --- /dev/null +++ b/files/fr/web/api/performancetiming/responseend/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.responseEnd +slug: Web/API/PerformanceTiming/responseEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - responseEnd +translation_of: Web/API/PerformanceTiming/responseEnd +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>responseEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur à partir d'un cache ou d'une ressource locale.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.responseEnd;</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('Navigation Timing', '#dom-performancetiming-responseEnd', + 'PerformanceTiming.responseEnd')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.responseEnd")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/responsestart/index.html b/files/fr/web/api/performancetiming/responsestart/index.html new file mode 100644 index 0000000000..e5130ffc08 --- /dev/null +++ b/files/fr/web/api/performancetiming/responsestart/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.responseStart +slug: Web/API/PerformanceTiming/responseStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - responseStart +translation_of: Web/API/PerformanceTiming/responseStart +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>responseStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment (en millisecondes depuis l'époque UNIX) où le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.responseStart;</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('Navigation Timing', '#dom-performancetiming-responsestart', + 'PerformanceTiming.responseStart')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.responseStart")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/secureconnectionstart/index.html b/files/fr/web/api/performancetiming/secureconnectionstart/index.html new file mode 100644 index 0000000000..c23334901d --- /dev/null +++ b/files/fr/web/api/performancetiming/secureconnectionstart/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.secureConnectionStart +slug: Web/API/PerformanceTiming/secureConnectionStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - secureConnectionStart +translation_of: Web/API/PerformanceTiming/secureConnectionStart +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>secureConnectionStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la poignée de main de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, elle retourne <code>0</code>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.secureConnectionStart;</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('Navigation Timing', '#dom-performancetiming-secureconnectionstart', + 'PerformanceTiming.secureConnectionStart')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.secureConnectionStart")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/unloadeventend/index.html b/files/fr/web/api/performancetiming/unloadeventend/index.html new file mode 100644 index 0000000000..6ecbcdfe0e --- /dev/null +++ b/files/fr/web/api/performancetiming/unloadeventend/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.unloadEventEnd +slug: Web/API/PerformanceTiming/unloadEventEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - unloadEventEnd +translation_of: Web/API/PerformanceTiming/unloadEventEnd +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventEnd"><code>PerformanceNavigationTiming.unloadEventEnd</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>unloadEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est <code>0</code>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.unloadEventEnd;</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('Navigation Timing', '#dom-performancetiming-unloadeventend', + 'PerformanceTiming.unloadEventEnd')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.unloadEventEnd")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/performancetiming/unloadeventstart/index.html b/files/fr/web/api/performancetiming/unloadeventstart/index.html new file mode 100644 index 0000000000..432ccc7870 --- /dev/null +++ b/files/fr/web/api/performancetiming/unloadeventstart/index.html @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.unloadEventStart +slug: Web/API/PerformanceTiming/unloadEventStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - unloadEventStart +translation_of: Web/API/PerformanceTiming/unloadEventStart +--- +<p>{{APIRef("Navigation Timing")}}</p> + +<div class="notecard deprecated"> + <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventStart"><code>PerformanceNavigationTiming.unloadEventStart</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> +</div> + +<p class="summary">L'ancienne propriété en lecture seule <code><strong>unloadEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> a été lancé. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est <code>0</code>.</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.unloadEventStart;</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('Navigation Timing', '#dom-performancetiming-unloadeventstart', + 'PerformanceTiming.unloadEventStart')}}</td> + <td>{{Spec2('Navigation Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.PerformanceTiming.unloadEventStart")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li> +</ul> |