-
JavaScript, les bonnes pratiques : optimiser vos scripts (1/2)
Le 16 novembre 2010 par Maxime dans Conception web.
Une page bourrée de javascript, ça peut être cool. Des effets partout, des interactions, une réactivité de l’application web à nos actions… Oui, mais trop de js tue le js, pour une simple raison : le JavaScript est un langage très lent. Et le plus gros problème pour nous développeurs : nos visiteurs le remarquent. Voici donc quelques bons réflexes à avoir pour réduire le temps d’exécution de vos scripts.
Pourquoi optimiser ?
On pourrait se poser la question, c’est vrai. « Sur mon Firefox 3.6, mon script n’est pas lent, pourquoi m’embêter avec tes optimisations à la noix ! ». Oui bien sûr. Mais peut-être que si un script léger peut passer, un script plus important montrera des signes de lenteurs. Alors autant prendre les bonnes habitudes avant même de rencontrer le problème. Un script optimisé n’est pas plus long à écrire, au contraire, il pourrait même augmenter votre productivité, en particulier la factorisation de code.
Il y a quelques années, les gens s’attendaient à ce que le web soit lent. Mais de nos jours, on s’attend à ce que la page s’affiche quasi instantanément, et si ce n’est pas le cas, on passe à une autre. Une étude du cabinet Forrester Consulting a montré qu’en 2009, les internautes avaient une tolérance à la lenteur deux fois moins élevée qu’en 2006. Quand l’internaute de 2006 commençait à s’impatienter au bout de 4 secondes, celui de 2009 n’attendra que 2 secondes avant de s’attendre à un chargement complet. Les récents navigateurs ont fait de très beaux progrès sur leur moteur de rendu, en particulier Chrome et Safari. Mais certains sont encore très lents, dont le fameux navigateur le plus répandu : IE (
Infiniment ExaspérantInternet Explorer).Enfin, l’émergence des solutions mobiles, smartphones ou tablettes, revoit à la baisse la puissance des supports de lecture. Il faut donc être très attentif à ces optimisations pour garder une fluidité multi-supports de vos scripts.
Un code en promo
-10% sur tous vos scripts, ça vous dit ? Le premier paramètre d’un chargement rapide, c’est bien évidemment son poids. Quelques Ko de réduction, c’est toujours ça de pris. Prenez l’habitude de n’écrire que du code utile et de factoriser les codes similaires en fonctions. A commencer par les noms que vous donnez à vos variables. Restez simple et explicite, et évitez les noms à rallonge compliqués.
Il est aussi question de diminuer les appels de fonctions, le nombre d’itérations. Attention à ne pas avoir de redondance, par exemple deux fonctions exécutant une même partie de code. De même, inutile de définir une variable qui le sera par la suite. Aussi, apprenez à utiliser certains raccourcis, comme les incrémentations.
Dans cet exemple, vous devez opter pour la deuxième version :
var maPureVariableQuiTue = 0;
maPureVariableQuiTue = calculQuelconque();
afficher(maPureVariableQuiTue);
maPureVariableQuiTue = maPureVariableQuiTue + 1;
var result = calculQuelconque();
afficher(result++);
Aussi, pour raccourcir le code, ayez l’habitude de déléguer au css les changements de style. En plus d’avoir un code plus court, il y a un intérêt au niveau de ce qu’on appelle le repaint ou le reflow. Nous reviendrons en détail sur ces notions dans un prochain article. Ainsi évitez :
elemAChanger.style.background = '#333';
elemAChanger.style.color = '#fff';
elemAChanger.style.border = '1px solid #00f';
Et préférez :
div.highlight {
background: #333;
color: #fff;
border: 1px solid #00f;
}
elemAChanger.className = 'highlight';
En faisant attention à cela, en plus d’optimiser votre code, vous le rendrez également plus lisible. De même, factoriser en fonction et déléguer au css rend votre code plus maintenable. Ces conseils peuvent être également valables pour d’autres langages, même si le gain obtenu serait plus faible sur des langages coté serveur.
De belles boucles
Un exemple flagrant de code que l’on peut optimiser : les boucles. Pour la simple raison qu’une seule optimisation au sein d’une boucle aura un effet décuplé par le nombre d’itérations de celle-ci.
Tout d’abord, il faut dans la limite du possible restreindre le travail à faire dans une boucle, et y sortir tout ce qui ne serait pas nécessaire. Par exemple, certaines conditions peuvent être sorties de la boucle. Tant qu’à faire, essayez de réduire les itérations nécessaires à la réalisation de ce que vous désirez, même si des fois difficiles de faire autrement. Enfin, ne calculez pas plusieurs fois la condition de la boucle, l’erreur classique.
for(var i=0; i<tables.length; ++i) {
if(i==0) { appelerCuistot (tables[i]); }
else { reserver(tables[i]); }
}
appelerCuistot(tables[0]);
for(var i=1,len = tables.length; i<len; ++i) {
reserver(tables[i]);
}
Avant d’écrire votre boucle, analysez le problème que vous avez, le résultat que vous souhaitez obtenir. Vous vous éviterez ainsi des schémas compliqués si ce n’est des boucles infinies. Si le besoin que vous avez ne nécessite par exemple pas d’ordre dans l’appel de fonction, n’hésitez pas à simplifier vos conditions au minimum, de la manière suivante :
appelerCuistot(tables[0]);
for(var i=tables.length ; i--;) {
reserver(tables[i]);
}
On passe de deux calculs (i < len et i < len == true) à un seul (i– == true). Mine de rien, c’est 50% de temps d’exécution de gagné. Enfin, évitez for-in et for-each. Préférez for, while, et do-while, plus rapides.
A votre tour
Quelles méthodes appliquez-vous dans vos développements ? Partagez votre expérience dans les commentaires, vos réactions et critiques sont les bienvenues.
Crédit Photos : GeekPhilosopher
Flux RSS de design, referencement, actus internet - Bewype
Recevez les articles tout chauds sortis du four !
Inscrivez-vous à notre flux RSS
Partager - Faîtes découvrir le blog Bewype - conception site internet et logique entrepreneuriale
Jeter un oeil sur les autres articles : design graphique, actu web et marketing seo
Vos commentaires sur JavaScript, les bonnes pratiques : optimiser vos scripts (1/2)
(3) performance,javascript,optimisation - Réagissez !-
Yannick
18 novembre 2010 à 9 h 16 min
Le mieux est d’utiliser des compresseurs JS pour optimiser le code à fond et gagner quelque réel bon Ko.
Regardez plutôt du coté de Google ou leur compresseur est merveilleusement bien fait et l’optimisation est vraiment réalisé de façon exemplaire.
Voici l’adresse de ce compresseur qui est pour moi de loin le meilleurs !
-
Maxime
18 novembre 2010 à 11 h 41 min
http://www.bewype.fr/conception-web/bonnes-pratiques-javascript#compressez
Et pour te répondre, j’utilise moi aussi Google Closure, je le préfère à YUI Compressor à titre perso.Dans cet article je voulais vraiment parler de l’optimisation de l’exécution du js ; c’est bien beau de compresser, mais si c’est codé avec les pieds, les animations vont laguer !
-
Yannick
19 novembre 2010 à 10 h 23 min
Oui je l’ai vu après :s
Désolé
