aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/performanceelementtiming/index.md
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/api/performanceelementtiming/index.md')
-rw-r--r--files/fr/web/api/performanceelementtiming/index.md82
1 files changed, 82 insertions, 0 deletions
diff --git a/files/fr/web/api/performanceelementtiming/index.md b/files/fr/web/api/performanceelementtiming/index.md
new file mode 100644
index 0000000000..3a591036d7
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/index.md
@@ -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>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">&lt;img src="image.jpg" elementtiming="big-image"&gt;
+&lt;p elementtiming="text" id="text-id"&gt;le texte ici&lt;/p&gt;</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>