---
title: Performance
slug: Tools/Performance
translation_of: Tools/Performance
original_slug: Outils/Performance
---
<div>{{ToolsSidebar}}</div>

<p>L'outil Performance donne un aperçu de : la réactivité générale du site, la performance de son code JavaScript et de la performance du layout (disposition). Cet outil permet de réaliser un enregistrement (appelé profil) d'un site sur une période donnée. L'outil montre alors une <a href="/fr/docs/Tools/Performance/UI_Tour#Waterfall_overview">vue d'ensemble</a> des opérations que le navigateur a effectuées pour afficher le site durant le profil. Un graphique du <a href="/fr/docs/Tools/Performance/Frame_rate">frame rate</a> lors du profil est également affiché.</p>

<p>Il existe quatre sous-outils pour examiner les différents aspects du profil en détail :</p>

<ul>
 <li>La <a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a> révèle les différentes opérations que le navigateur fait, par exemple l'exécution de JavaScript ou de layout, les repaints ou bien même la garbage collection</li>
 <li><a href="/fr/docs/Tools/Performance/Call_Tree">L'Arbre d'appels</a> met en évidence les fonctions JavaScripts dans lesquels le navigateur passe le plus de temps.</li>
 <li>Le <a href="/fr/docs/Tools/Performance/Flame_Chart">Graphique JS (Flame Chart)</a> montre la pile d'appels JavaScript durant l'enregistrement.</li>
 <li>La vue <a href="/fr/docs/Tools/Performance/Allocations">Allocations</a> affiche les allocations faites par le code tout au long de l'enregistrement. Cette vue n'apparait que si vous avez coché l'option « Enregistrer les allocations » dans les outils de développement.</li>
</ul>

<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>

<hr>
<h2 id="Débuter">Débuter</h2>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/fr/docs/Tools/Performance/UI_Tour">UI Tour</a></dt>
 <dd>
 <p>Une visite guidée rapide pour s'y retrouver dans l'interface.</p>
 </dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/fr/docs/Tools/Performance/How_to">Comment faire ?</a></dt>
 <dd>Tutoriels pour les tâches de base : ouverture de l'outil, création, sauvegarde, chargement et configuration des enregistrements.</dd>
</dl>
</div>
</div>

<hr>
<h2 id="Composants_de_l'outil_Performance">Composants de l'outil Performance</h2>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/fr/docs/Tools/Performance/Frame_rate">Frame rate</a></dt>
 <dd>Comprendre la réactivité générale des sites.</dd>
 <dt><a href="/fr/docs/Tools/Performance/Call_Tree">Arbre d'appel</a></dt>
 <dd>Trouver les points noirs dans le code JavaScript d'un site.</dd>
 <dt><a href="/fr/docs/Tools/Performance/Allocations">Allocations</a></dt>
 <dd>Afficher les allocations faites par le code tout au long de l'enregistrement.</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/fr/docs/Tools/Performance/Waterfall">Chronologie</a></dt>
 <dd>Comprendre les opérations que fait le navigateur pendant que l'utilisateur interagit avec un site.</dd>
 <dt><a href="/fr/docs/Tools/Performance/Flame_Chart">Graphique JS</a></dt>
 <dd>Voir quelles fonctions JavaScript s'exécutent et quand elles s'exécutent pendant toute la durée de l'enregistrement.</dd>
 <dd></dd>
</dl>
</div>
</div>

<hr>
<h2 id="Scenarios">Scenarios</h2>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/fr/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animer des propriétés CSS</a></dt>
 <dd>Utiliser l'arbre d'appel pour comprendre comme le navigateur met à jour une page, et comment différentes animations de propriétés CSS peuvent impacter la performance.</dd>
 <dd></dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/fr/docs/Tools/Performance/Scenarios/Intensive_JavaScript">JavaScript intensif</a></dt>
 <dd>Utiliser le frame rate et l'arbre d'appel pour mettre en évidence les problèmes causés par du JavaScript à longue exécution et comment l'utilisation des workers peut aider à résoudre cette situation..</dd>
</dl>
</div>
</div>



<div class="column-half">
<dl>
 <dd></dd>
</dl>
</div>