Bonjour,

Ce billet pour parler d’un problème rencontré trop souvent dans un code JavaScript lors du développement d’une application web avec JQuery.

Le problème

Mon client me dit que le temps de chargement d’un page est trop long, et me demande si je peux le diminuer.

L’analyse

Je regarde la page en question, et découvre du code JavaScript dont j’ai extrait les lignes suivantes :

for (var i = 1 ; i <= 1000 ; i++)
        $('#test').Append('<h1>Test' + i + '</h1>');

Je note un 1^er problème :

A chaque passage dans la boucle, je parcours le DOM avec le code #(‘test’)

Nous pouvons optimiser ce code de la manière suivante :

var test = $('#test');
for (var i = 1 ; i <= 1000 ; i++)
        test.Append('<h1>Test' + i + '</h1>') ;

Ce code est plus optimisé puisque j’évite de parcourir le DOM en sauvegardant le résultat de la requête JQuery dans une variable que je réutilise. De cette manière, je ne parcours le DOM qu’une seule fois.

Je note toutefois un 2^ème problème dans ce code :

A chaque passage dans la boucle, j’ajoute une chaine dans le DOM. Je pourrais concaténer les chaines HTML en amont, ce qui donnerait :

var chaine = '';
for (var i = 1 ; i <= 3 ; i++)
        chaine += '<h1>Test ' + i + '</h1>';
var test = $('#test');
test.Append(chaine);

Ce code est plus optimisé puisque j’évite de manipuler le DOM plus que nécessaire.

Conclusion

Lors du développement d’une application JavaScript, une app SharePoint par exemple, 2 points d’attention doivent retenir votre attention :

• Minimiser le parcours du DOM
• Eviter la manipulation excessive du DOM

Il y a d’autres points importants pour l’optimisation de son code, points sur lesquels je reviendrai dans de futurs posts, mais nous avons ici une 1^ère base.