JavaScript est l’un des langages les plus flexibles qui soient, mais cela a parfois un coût en termes de performances. L’un de ces exemples est l’utilisation de propriétés ajoutées dynamiquement aux objets. Curieusement, cet impact sur les performances provient des moteurs JavaScript qui optimisent le typage statique.
Le moteur V8, qui alimente Chrome et Node.js, utilise le typage statique. formes et chaînes de transition pour optimiser l’accès aux propriétés des objets. Lorsque deux objets ont les mêmes propriétés, on considère qu’ils ont la même forme. L’ajout de nouvelles propriétés à un objet, crée une chaîne de transition pour ajouter la nouvelle propriété. Sans entrer dans les détails, il est évident qu’une forme simple est plus rapide d’accès qu’une chaîne de transition.
const obj = { a: 1 };
obj.b = 2;
console.log(obj.a);
Pour en revenir aux propriétés ajoutées dynamiquement, le moteur ne peut pas savoir à l’avance quelles propriétés seront ajoutées à l’objet. Il finit donc par créer une chaîne de transition pour chaque nouvelle propriété ajoutée. Ce n’est pas un gros problème pour quelques propriétés, mais cela peut le devenir lorsque l’on ajoute beaucoup de propriétés à un objet.
Heureusement, ce problème est facile à résoudre. La solution la plus simple consiste à définir toutes les propriétés possibles d’un objet à l’avance et leur donner une valeur vide (i.e. null ou undefined). De cette façon, le moteur peut créer une forme pour l’objet et optimiser l’accès aux propriétés. Ce n’est pas toujours possible, mais c’est une bonne pratique à suivre.
const obj = { a: 1, b: undefined };
obj.b = 2;
console.log(obj.a);