Raccourcir les chaînes d'objets en JavaScript

Voici un petit truc que j'avais entendu parler et que j'ai testé pour constater qu'il est possible d'optimiser la performance du JavaScript si vous faites des chaînes d'objets du type :

window.document.forms.myForm.field

Chaque point dans la référence à l'objet nécessite une recherche pour accéder à sa partie. Si la chaîne est référencée plus d'une fois, on peut l'assigner à une variable qui pointera directement sur l'objet et qui permettra de réduire le nombre de recherches nécessaires.

Voici un petit test qui démontre le gain de performance :

var foo, start, end, executionTime;

/* Test 1 */
start = new Date().getTime();
for(var i=0 ; i<10000 ; i++){
   foo = window.document.forms.myForm.field;
}

executionTime = new Date().getTime() - start;
console.log('Test 1 : %i', executionTime);

/* Test 2 */
var refForm = window.document.myForm;

start = new Date().getTime();
for(var i=0 ; i<10000 ; i++){
   foo = refForm.field;
}

executionTime = new Date().getTime() - start;
console.log('Test 2 : %i', executionTime);

/* Test 3 */
var refElem = window.document.myForm.field;
start = new Date().getTime();

for(var i=0 ; i<10000 ; i++){
   foo = refElem;
}

executionTime = new Date().getTime() - start;
console.log('Test 3 : %i', executionTime);

• Le premier test utilise la notation longue à l'intérieur de la boucle de 10 000 itérations. Sans surprise, c'est le plus lent (44).
• Le deuxième test retient la référence au formulaire et un seul test doit être effectué pour accéder à field. On note que la performance est grandement améliorée (8).
• Le troisième test conserve la référence directe à field donc plus aucune recherche n'est nécessaire. C'est quasi instantané (1).

Les résultats affichés dans Firebug :