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
Dernière mise à jour par :
maximelore,