Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Performance

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 vue d'ensemble des opérations que le navigateur a effectuées pour afficher le site durant le profil. Un graphique du frame rate lors du profil est également affiché.

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

  • La Chronologie 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
  • L'Arbre d'appels met en évidence les fonctions JavaScripts dans lesquels le navigateur passe le plus de temps.
  • Le Graphique JS (Flame Chart) montre la pile d'appels JavaScript durant l'enregistrement.
  • La vue Allocations affiche les allocations faites par le code tout au long de l'enregistrement.


Débuter

UI Tour

Une visite guidée rapide pour s'y retrouver dans l'interface.

Comment faire ?
Tutoriels pour les tâches de base : ouverture de l'outil, création, sauvegarde, chargement et configuration des enregistrements.

Composants de l'outil Performance

Frame rate
Comprendre la réactivité générale des sites.
Arbre d'appel
Trouver les points noirs dans le code JavaScript d'un site.
Allocations
Afficher les allocations faites par le code tout au long de l'enregistrement.
Chronologie
Comprendre les opérations que fait le navigateur pendant que l'utilisateur interagit avec un site.
Graphique JS
Voir quelles fonctions JavaScript s'exécutent et quand elles s'exécutent pendant toute la durée de l'enregistrement.
 

Scenarios

Animer des propriétés CSS
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.
 
JavaScript intensif
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..

 

 

 

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : maximelore, KrySoar, WSH, adim
 Dernière mise à jour par : maximelore,