Découvrez comment utiliser Chrome et les outils pour les développeurs afin de détecter les problèmes de mémoire qui affectent les performances des pages, y compris les fuites de mémoire, l'encombrement de la mémoire et les récupérations de mémoire fréquentes.
Résumé
- Découvrez la quantité de mémoire utilisée par votre page avec le gestionnaire de tâches Chrome.
- Visualisez l'utilisation de la mémoire au fil du temps avec les enregistrements de la chronologie.
- Identifiez les arborescences DOM dissociées (une cause courante de fuites de mémoire) à l'aide d'instantanés de tas.
- Découvrez quand de la mémoire est allouée dans votre tas de mémoire JS grâce aux enregistrements de la chronologie d'allocation.
- Identifiez les éléments dissociés conservés par une référence JavaScript.
Présentation
Dans l'esprit du modèle de performances RAIL, vos efforts d'optimisation des performances doivent être axés sur vos utilisateurs.
Les problèmes de mémoire sont importants, car ils sont souvent perceptibles par les utilisateurs. Les utilisateurs peuvent percevoir des problèmes de mémoire de différentes manières:
- Les performances d'une page se dégradent progressivement au fil du temps. Il s'agit peut-être d'un symptôme de fuite de mémoire. Une fuite de mémoire se produit lorsqu'un bug sur la page entraîne une utilisation progressive de plus en plus de mémoire au fil du temps.
- Les performances d'une page sont constamment mauvaises. Il s'agit peut-être d'un symptôme de gonflement de la mémoire. Une page utilise plus de mémoire qu'il n'est nécessaire pour une vitesse de chargement optimale.
- Les performances d'une page sont retardées ou semblent s'interrompre fréquemment. Il s'agit peut-être d'un symptôme de récupération de mémoire fréquente. La récupération de mémoire est le moment où le navigateur récupère de la mémoire. C'est le navigateur qui décide de ce moment. Pendant les collections, toute exécution de script est mise en veille. Par conséquent, si le navigateur effectue beaucoup de collecte des déchets, l'exécution du script sera souvent suspendue.
Établir la limite de la surcharge de mémoire
Une fuite de mémoire est facile à définir. Si un site utilise progressivement de plus en plus de mémoire, il y a une fuite. En revanche, l'encombrement de la mémoire est un peu plus difficile à identifier. Qu'est-ce qui est considéré comme une "utilisation excessive de mémoire" ?
Il n'existe pas de chiffres précis, car les appareils et les navigateurs ont des fonctionnalités différentes. La même page qui s'exécute sans problème sur un smartphone haut de gamme peut planter sur un smartphone d'entrée de gamme.
L'essentiel est d'utiliser le modèle RAIL et de vous concentrer sur vos utilisateurs. Identifiez les appareils les plus populaires auprès de vos utilisateurs, puis testez votre page sur ces appareils. Si l'expérience est constamment mauvaise, la page peut dépasser les capacités de mémoire de ces appareils.
Surveiller l'utilisation de la mémoire en temps réel avec le gestionnaire de tâches Chrome
Utilisez le gestionnaire de tâches de Chrome comme point de départ pour examiner le problème de mémoire. Le gestionnaire de tâches est un moniteur en temps réel qui vous indique la quantité de mémoire utilisée par une page.
Appuyez sur Maj+Échap ou accédez au menu principal de Chrome, puis sélectionnez Plus d'outils > Gestionnaire de tâches pour ouvrir le gestionnaire de tâches.