blob: 01214c61c194c236d107af455e8b0272c7accac8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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>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>
|
