Profilage du code JavaScript : trouver les goulots d'étranglement en pratique

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Introduction : pourquoi le profilage est un must-have pour chaque développeur

Avez-vous déjà écrit du code qui semble fonctionner, mais qui commence à « ralentir » en production ? Ou peut-être avez-vous lancé un serveur Node.js, et après quelques minutes, il « dévorait » toute la mémoire ? Le plus souvent, le problème ne vient pas du langage, mais des goulots d'étranglement — des sections de code qui s'exécutent de manière non optimale.

Le profilage (profiling) est le processus de collecte de métriques sur le fonctionnement d'un programme : temps d'exécution des fonctions, consommation mémoire, fréquence d'appels. Sans lui, toute optimisation est une divination. Dans cet article, nous allons voir comment profiler du code JavaScript dans l'environnement Node.js, trouver les « goulots d'étranglement » et les éliminer.

Vous découvrirez les outils intégrés de V8, Chrome DevTools et des techniques pratiques qui vous aideront à rendre votre code plus rapide.

1. Profilage intégré dans Node.js : le flag --prof

La façon la plus simple de commencer le profilage est d'utiliser le flag --prof lors du lancement de votre application Node.js. Il active la collecte de statistiques V8, qui sont ensuite converties en un rapport lisible.

Comment ça fonctionne

Lancez votre application avec le flag :

node --prof app.js

Une fois l'application terminée, un fichier isolate-0x...-v8.log apparaît dans le dossier. Ce sont des données brutes. Pour obtenir un rapport, utilisez l'utilitaire node --prof-process :

node --prof-process isolate-0x...-v8.log > profile.txt

Exemple : trouver une fonction lente

Supposons que nous ayons ce code :

function slowSort(arr) {    return arr.sort((a, b) => a - b);}

function heavyComputation() {    let sum = 0;    for (let i = 0; i < 1e7; i++) {        sum += Math.sqrt(i);    }    return sum;}

// Lancementconst data = Array.from({ length: 10000 }, () => Math.random());slowSort(data);heavyComputation();

Après le profilage, vous verrez quelque chose comme ceci dans le rapport :

[JavaScript]:   ticks  total  nonlib   name   120    60.0%  70.0%   LazyCompile: *heavyComputation app.js:5    40    20.0%  25.0%   LazyCompile: *slowSort app.js:1

Le nombre ticks indique le nombre de « ticks » (échantillons) attribués à chaque fonction. Plus il y a de ticks, plus la fonction a mis de temps à s'exécuter. Dans notre cas, heavyComputation est le principal candidat à l'optimisation.

2. Chrome DevTools : le profileur visuel pour Node.js

Si le rapport textuel vous semble peu pratique, utilisez Chrome DevTools. C'est une interface graphique qui affiche un flamegraph (graphique en flammes) — une visualisation de la pile d'appels dans le temps.

Connexion à un processus Node.js

Lancez l'application avec le flag --inspect :

node --inspect app.js

Ouvrez Chrome, dans la barre d'adresse tapez chrome://inspect. Cliquez sur « Open dedicated DevTools for Node ». Vous accéderez à une interface où vous pourrez enregistrer des profils.

Analyse pratique

Prenons un exemple avec une fuite mémoire :

const cache = [];

function addToCache(item) {    cache.push(item);}

function processData() {    for (let i = 0; i < 100000; i++) {        addToCache({ id: i, data: new Array(1000).fill('x') });    }}

processData();

Enregistrez un profil via l'onglet « Memory » (faites un instantané du tas). Vous verrez que le tableau cache occupe des centaines de mégaoctets. Le flamegraph dans l'onglet « Performance » montrera que la fonction addToCache est appelée 100 000 fois — c'est le goulot d'étranglement.

Solution : soit limiter la taille du cache, soit utiliser une structure avec suppression automatique des anciens éléments (par exemple, un Map avec une limite).