diff options
Diffstat (limited to 'files/fr/web/api/performanceelementtiming')
11 files changed, 711 insertions, 0 deletions
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> |