blob: e1c86e7c392754ce18ae590a5836466a3e21f328 (
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
|
---
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><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>
|
