Nicholas Zakas, de Yahoo!, propose un bon aperçu pour ceux que ça intéresse dans sa présentation « Writing Efficient javascript » aux conférences Velocity 2009.

Variables locales

Vous y trouverez un rappel sur l’influence de la chaîne de résolution des variables javascript avec un raccourci très significatif : local variable = fast. Le graphique à l’écran 26 est parfait pour expliquer tout ça :

Les fermetures lexicales et les try/catch augmentent d’autant la chaîne de résolution. Les with ajoutent un niveau à chaque accès à une variable et sont eux à éviter.

Globalement utilisez le mot clef var partout, ne laissez pas de variables globales. Quand vous utilisez plus d’une fois une donnée qui n’est pas globale à votre bloc de code, et particulièrement si elle est dans un tableau ou dans un objet, stockez là dans une variable locale pour un accès plus rapide.

Boucles et listes

Plus loin, dans les écrans 60+ Nicholas discute des boucles, avec quelques faits connus mais qu’il convient de rappeler, notamment que les conditions d’arrêt des boucles doivent être le plus simple possible : Si vous itérez dans un tableau, : stockez la taille du tableau dans une variable locale au lieu de tester sa valeur à chaque itération, et évitez for/in, for/each ou les équivalents each des différentes bibliothèques javascript.

C’est particulièrement vrai pour ce qui est retourné par les collections DOM, par exemple ce qui est dans document.images ou document.getElementByTagName(). Il s’agit de collections dynamiques et la recherche est relancée à chaque fois qu’on accède à une propriété de la liste, par exemple si on teste le nombre d’éléments de la liste en condition d’arrêt d’une boucle.

A propos des boucles, je vous conseille aussi ce billet de Greg Reimer de chez Sun. Il y liste différentes manière de faire des boucles en javascript sur un tableau, un tableau épart, et une collection HTML, avec des microbenchmark pour comparer le tout.

Repaint et reflow

Pour rappel le reflow c’est le recalcul de la géométrie et de l’agencement de la page en fonction du formattage de tous les objets présents. Cela arrive quand on manipule le DOM, change les styles, ou récupère des informations de style.

Les solutions à apporter ont toutes été déjà abordées ici mais les voici ensemble et confirmées par Nicholas :

• Faire les manipulations de DOM en dehors du document, par exemple dans un fragment ou en display:none
• Grouper ensemble les modifications de style, majoritairement en changeant la classe HTML au lieu du style directement, ou en utilisant cssText
• Mettre en cache les informations sur l’agencement de la page qu’on récupère via javascript, puis grouper séparément les lectures et les écritures