Portée des variables Javascript

Après CSS, faisons un petit passage par Javascript. C’est Yoan qui m’a fait passé un lien intéressant d’Ariel Flesler. 

La portée des variables javascript

La portée des variables Javascript trompe souvent le développeur débutant. Les variables variables fonctionnent par bloc de code. Pour faire court un bloc c’est ce qui est délimité par des accolades ouvrantes et fermantes.

Par défaut on va regarder si une variable est présente dans le bloc de code par défaut, sinon on regarde dans le bloc parent, et ainsi de suite jusqu’au niveau global. Les variables du niveau global sont simplement des propriétés de l’object window.

On peut forcer une variable locale avec le mot clé var. On a alors une nouvelle variable qui n’est pas partagé avec les blocs parents. Elle restera toutefois partagée avec les blocs enfants si eux même ne redéclarent pas la variable avec le mot clef var.

L’impact sur les performances

Cette portée impose au moteur javascript de faire des calculs, qui peuvent prendre plus ou moins de temps. C’est cet impact sur les performances que Ariel Flester a testé.

Il a tenté d’imbriquer des déclarations de fonctions anonymes les unes dans les autres. Chaque fonction déclare une variable et la fonction la plus interne tente d’y accéder. Le temps total nécessaire à javascript varie alors suivant qu’on tente d’accéder à une variable dans un bloc proche ou éloigné. 

Différences suivant les navigateurs

Les résultats suivant les navigateurs sont assez clairs : sur Firefox 2 aller chercher une variable dans le bloc parent prend 300ms (sur 400.000 itérations), sauter 3 blocs prend donc 900ms. Entre 78ms (utiliser une variable locale) et 969ms (utiliser une variable globale, avec trois blocs imbriqués), la différence est flagrante.

Sur Microsoft Internet Explorer (6 et 7) et Safari 3 on remarque aussi une perte de performance progressive suivant qu’on utilise des variables locales, des variables d’un bloc proche ou des variables situé à plusieurs niveaux plus haut. Pour les deux, le test tourne deux fois plus rapidement avec une variable locale qu’avec une variable globale située trois blocs au dessus.

C’est Firefox 3 et Opera 9 qui ont tout bon. Là non seulement le code tourne plus rapidement avec des variables locale (30 à 40ms contre 60 à 95 pour Firefox 2, Safari 3 et MSIE) mais en plus l’imbrication des blocs n’a aucune ou presque aucune influence. On remarque le gros progrès de Firefox entre la version 2 et 3.

Quid ?

Ariel a tout de même passé son code de 2,5 secondes à 230 ms, simplement en évitant d’utiliser une variable globale. On est là sur un gain de performance majeur.

Son code est très spécifique, avec certainement beaucoup d’itérations et d’itération, et l’impact sur votre propose code ne sera probablement pas aussi important. Son test est par exemple fait sur 3 imbrications et 400.000 itérations, sans pour autant atteindre un gain de 100ms (sauf sur Firefox 2, où le gain s’approche d’une seconde).

L’important

Toutefois, rien qu’à cause de Firefox 2, les résultats ne peuvent être ignorés. La bonne pratique est aussi simple à mettre en oeuvre :

• évitez les variables globales,
• utilisez avec parcimonie du principe des closures, 
• et n’hésitez pas à dupliquer des contenus dans des variables locales si vous comptez les utiliser fréquemment.

Le mot clef var est votre ami.