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
|
---
title: Frame rate
slug: Outils/Performance/Frame_rate
translation_of: Tools/Performance/Frame_rate
---
<div>{{ToolsSidebar}}</div><div class="summary">
<p>Le Frame rate est une unité de mesure de la réactivité des sites web en frames par seconde (fps). Un frame rate faible ou extrêmement variable peut donner l'impression qu'un site ne répond pas ou est de mauvaise qualité. Cela donne une mauvaise expérience utilisateur.</p>
<p><strong>Un frame rate de 60fps est la cible idéale pour des performances fluides, cela donne un budget temps de 16.7ms pour effectuer tous les changements en réponse à un évènement.</strong></p>
<p>Le graphique du frame rate dans l'outil Performance affiche le frame rate au cours de l'enregistrement. Cela donne une indication rapide d'où se situent les problèmes dans le site analysé, et permet d'utiliser d'autres outils pour une analyse plus approfondie.</p>
</div>
<h2 id="Frame_rate_et_réactivité">Frame rate et réactivité</h2>
<p>Le Frame rate est la vitesse à laquelle un appareil vidéo peut produire des images (frames). Cette unité est très utilisée dans les films ou les jeux vidéos, mais est maintenant utilisée couramment comme indicateur de performance pour les sites web et les applications web.</p>
<p>Dans le domaine de la performance web, une frame englobe tout le travail que doit faire le navigateur afin de mettre à jour et de repeindre l'écran. Le frame rate est évidemment applicable aux animations : si le frame rate est trop bas, une animation aura l'air saccadée, alors qu'avec un frame rate élevée, elle sera fluide. Mais le frame rate est également utile en temps qu'indicateur de performance générale de la réactivité d'un site web lorsqu’un utilisateur interagit avec.</p>
<p>Par exemple, si déplacer la souris au-dessus d'un élément de la page active du code JavaScript qui change l'apparence de l'élément et déclenche ainsi un reflow et un repaint, alors tout le travail doit être complété dans la même frame. Si l'opération prend trop de temps au navigateur, alors celui-ci apparaitra momentanément non réactif.</p>
<p>Similairement, si faire défiler une page implique un grand nombre de mises à jour complexes et que le navigateur ne peut alors pas garder un frame rate décent, alors le navigateur sera saccadé et sera occasionnellement bloqué (freeze).</p>
<p>En général, un frame rate constant et élevé rendra les interactions de l'utilisateur plus agréables.</p>
<div class="note">
<p>Un frame rate de 60fps est reconnu comme le saint Graal de la performance. Cela donne un budget temps de 16.7ms pour toutes les opérations à effectuer dans une frame.</p>
<p>Cependant, la constance est très importante, surtout si le frame rate ne peut pas être de 60fps. Il est recommandé d'avoir un frame rate moins élevé, mais plus constant afin d’éviter des différences de réactivité brusques.</p>
</div>
<h2 id="Graphique_du_Frame_rate">Graphique du Frame rate</h2>
<p>Le graphique du frame rate se trouve dans la <a href="/fr/docs/Tools/Performance/UI_Tour#Recording_overview">vue d'ensemble de l'enregistrement</a> de l'outil Performance. Il prend un simple timestamp lorsque le navigateur finit une frame, et l'utilise pour connaitre le frame rate tout au long de l'enregistrement.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11025/perf-frame-rate.png" style="display: block; height: 66px; margin-left: auto; margin-right: auto; width: 900px;">L'axe X est le temps dans le profil. Il y a trois annotations : le frame rate maximum, le frame rate minimum, et le frame rate moyen.</p>
<h2 id="Utiliser_le_graphique_du_frame_rate">Utiliser le graphique du frame rate</h2>
<p>Le principal intérêt de ce graphique est que tout comme la <a href="/fr/docs/Tools/Web_Console">Console web</a>, il donne une indication rapide d'ou le site peut avoir des problèmes et permet une analyse plus approfondie par d'autres outils. Voici par exemple une capture d'écran d'un profil de performance :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11023/perf-fr-waterfall.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>Il est possible de voir que le frame rate moyen est raisonnable, mais qu'il existe cependant trois endroits où le frame rate s'effondre pendant 10 millisecondes. Cela causera certainement un freeze considérable dans les animations de la page.</p>
<p>Le graphique du frame rate est en relation avec la <a href="/fr/docs/Tools/Performance/UI_Tour#Waterfall_overview">vue d'ensemble de la Chronologie</a> et celle-ci est affichée directement au-dessus. Il est donc possible de voir que les chutes correspondent aux barres orange qui dénotent le temps passé à exécuter du JavaScript.</p>
<p>Sélectioner une partie de l'enregistrement contenant une chute permet de zoomer sur cette partie. La vue principale de la <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a> en dessous affiche alors les informations de cette portion uniquement. Il est alors possible de trouver le coupable :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11027/perf-zoom.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>Il y a ici une fonction JavaScript exécutée à la suite d'un évènement de clic qui bloque le processus principal pendant 170 millisecondes.</p>
<p>Pour savoir de quelle fonction il s'agit exactement, il faut passer au <a href="/fr/docs/Tools/Performance/Flame_Chart">Flame Chart (Graphique JS)</a> pour voir la pile d'appels à ce moment donné :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11021/perf-fr-flame-chart.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>La fonction coupable est <code>doPointlessComputations()</code>, et est définie dans "main.js". Pour régler ce problème, il est possible de séparer cette fonction en plusieurs parties et d'exécuter ces parties dans <code><a href="/fr/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></code>, ou bien même d'exécuter la fonction dans un <a href="/fr/docs/Web/API/Web_Workers_API/Using_web_workers">worker</a>. L'article <a href="/fr/docs/Tools/Performance/Scenarios/Intensive_JavaScript">JavaScript intensif</a> expose des stratégies pour résoudre ce genre de problèmes.</p>
|
