Formation avancée · 2 jours · en français
JavaScript — profiling et mémoire
Nous allons chercher pourquoi une page ralentit ou utilise de plus en plus de mémoire, puis vérifier que nos corrections fonctionnent vraiment.
Positionnement
Ce cours commence là où les fondamentaux s’arrêtent
Vous savez déjà écrire du JavaScript navigateur, manipuler le DOM, gérer des événements et des requêtes, puis utiliser Console, Sources, Elements, Network et les breakpoints ordinaires. Si ce socle n’est pas encore fluide, commencez par Fondamentaux JavaScript + DevTools.
Le cours se concentre sur les panneaux Performance et Memory, ainsi que sur l’interprétation de leurs traces, profils d’allocation et heap snapshots.
Construction du cours
6 étapes principales
Nous commençons par la reachability, apprenons à lire un heap snapshot, observons un memory leak, puis localisons les allocations avant d’aborder le CPU profiling et les éléments DOM détachés.
- Étape 01 · Basics 01. Garbage collector et reachability Comprendre pourquoi un cycle unreachable est collectible, puis créer un vrai memory leak retenu depuis une root.
- Étape 02 · Outil Memory 02. Memory profiles Prendre un heap snapshot pour voir les objects encore présents, puis suivre leur retaining path jusqu’à une root.
- Étape 03 · Problème Memory 03. It’s Raining Mem Suivre des gouttes de pluie qui disparaissent du paysage mais restent dans le heap.
- Étape 04 · Outil Memory 04. Allocation sampling Dans un sandbox rétro inspiré d’Asteroids, repérer les fonctions qui allouent le plus de données.
- Étape 05 · Problème CPU 05. CPU performance et profiling Lire le frame budget, enregistrer une trace et trouver le travail JavaScript qui ralentit une frame.
- Étape 06 · Outil Memory 06. Detached elements Retirer des éléments du DOM, observer les references JavaScript qui les retiennent, puis les libérer proprement.