diff options
Diffstat (limited to 'files/fr/web/api/performanceelementtiming/index.md')
-rw-r--r-- | files/fr/web/api/performanceelementtiming/index.md | 82 |
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"><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> |