JavaScript : comment les navigateurs exécutent le code JS ?
Il y a quelques semaines, nous avons évoqué les compilateurs et notamment les compilateurs pour les langages dynamiques. JavaScript est un langage interprété. Il faut un interpréteur et un compilateur pour pouvoir exécuter le code. Dans les navigateurs, il s’agit d’un moteur JavaScript. Les plus connus sont :
V8 de Google pour Chrome et Node
SpiderMonkey pour Firefox
JavaScriptCore pour Safari / WebKit
Le code JS passe par 3 phases principales :
1 / le parsing
2 / la compilation
3 / l’exécution proprement dite
Le parsing s’appuie sur un parser qui a la lourde tâche de lire le code JS et de le convertir en un arbre syntaxique abstrait ou AST (Abstrait Syntax Tree). On parlera aussi d’arbre de syntaxe abstraite. C’est essentiel car sans ce code intermédiaire, le compilateur ne peut pas agir. C’est après la compilation que le moteur de rendu JS exécute le code. En plus de 3 phases, plusieurs éléments sont importants : le compilateur JIT qui permet d’améliorer les performances du code, le caching Inline et la garbage collection pour la gestion mémoire et la bonne utilisation des ressources.
Bien entendu, pour l’utilisateur, tout cela est transparent, idem pour le développeur qui n’a pas à se soucier de ces problèmes. Normalement, le navigateur fait le travail.
Cependant, plusieurs optimisations peuvent améliorer notablement les performances et la stabilité du code, par exemple :
- optimiser les manipulations et traitements DOM et utiliser des frameworks pour optimiser le DOM
- des boucles et conditions bien structurées
- utiliser une syntaxe moderne suivant les dernières évolutions de JS : ce point est important car un code ancien peut ralentir le moteur JS et donc les performances des sites
- éviter de créer inutilement des variables globales qui consomment de la mémoire et surchargent le code et son traitement
- charger les ressources (images, fichiers, données, etc.) uniquement quand elles sont nécessaires
- ne bloquer pas le main thread : tout blocage ou de longs traitements peuvent bloquer l’interface et donc nuire à la réactivité de son app. Une bonne pratique : les Web Worker.
- instrumenter votre code, faire un tuning en exécution avec les DevTools des navigateurs