Le JavaScript intervient de plus en plus, quelque soit le type de site internet. Du simple carrousel à l’affichage d’une carte en 2D isométrique (comme le plugin pp3Diso), en passant par des effets spéciaux, JavaScript est là, pratiquement sur toutes les pages.

Et comme il est exécuté côté client, il n’est pas rare qu’un mauvais codage ralentisse sensiblement l’affichage d’une page. Sans compter avec les anciens navigateurs ou même les smartphones qui ne sont pas forcément des bêtes de course.

Une fois que vous aurez mis en place les préconisations extérieures au code, voici quelques astuces qui sont liées directement au code.

Les boucles

Vous avez forcément une boucle qui traîne dans votre code JavaScript. Sachez que l’expression qui permet de mettre fin à la boucle (la condition) est recalculée à chaque fois. Voici un mauvais exemple :

for(var i = 0; i < maChaine.length; i++) {
     //  ...
}

la longueur de la chaine va être recalculée à chaque fois : pas bien. Voilà comment coder cette boucle :

var l = maChaine.length;
for(var i = 0; i < l; i++) {
     //  ...
}

Vous gagnerez en rapidité.

Évidement, vous constaterez une différence uniquement sur de longues boucles. Mais bon, il est toujours bon de prendre de bonnes habitudes.

Quelques calculs

J’ai régulièrement besoin de transformer une chaine de caractères en entier. Il existe une fonction qui permet de faire cela : parseInt.

Le problème de cette fonction, qui est relativement rapide, c’est que si on l’utilise tel quel, on risque d’avoir quelques surprises et notamment lorsque la chaine de caractères commence par un zéro.

En effet, parseInt(‘0777’) donnera 511 comme résultat alors que parseInt(‘777’) donnera 777.

Tout simplement parce que ‘0777’ est interprété comme un chiffre en notation octale (base 8) alors que ‘777’ est en notation décimal (base 10).

Pour contrer cela, il suffit d’indiquer un second paramètre : parseInt(‘0777 », 10) donnera bien 777 car on a précisé la base en second paramètre.

Oui, mais… dans ce cas, on a une fonction qui est, en moyenne, 2000 fois plus lente !

Alors voici plusieurs possibilité plus rapides que parseInt :

var chaine = '0756';

//-- 1ere possibilité : la plus rapide en moyenne
var result = chaine | 0;

//-- autre possibilité
var result = chaine >> 0;

//-- une dernière
var result = ~~(chaine);

Comme vous le voyez, vous avez le choix. Ces variantes sont environ 2000 fois plus rapide (tout dépend du navigateur, de l’OS, de la vitesse de votre machine, …)

Un peu de jQuery

jQuery est utilisé à tout va et pour n’importe quoi. C’est un peu normal, il simplifie grandement le développement. Mais bon, parfois, vous pouvez vous en passer, hein ! Mais ce n’est pas le sujet.

Pour masquer un objet, vous pouvez utiliser cette fonction :

$('#mon_objet').hide();

Rien de plus simple… Sauf que c’est lent, très lent !

Alors, utilisez plutôt cette solution :

$('#mon_objet').css('display', 'none');

Beaucoup plus rapide.

Lorsque vous faites référence à un objet, mettez la référence en cache si vous y faites plusieurs fois appel :

//--- ne pas faire :
var display = $('#objet').css('display');
var x = $('#objet').css('left');
var y = $('#objet').css('top');

//--- faites plutôt ceci :
var obj = $('#objet');
var display = obj.css('display');
var x = obj.css('left');
var y = obj.css('top');

Et, comme d’habitude, tout ceci est à modifier en fonction de vos besoins et de chaque cas particulier que vous allez rencontrer.

Profiler Safari

Profiler Safari

Pensez d’abord qu’il faut optimiser les boucles. Ce qui se trouve dans les boucles est, normalement, répété beaucoup de fois. Safari dispose d’un très bon outils pour visualiser les fonctions qui prennent du temps : le profiler. Vous pouvez le démarrer et le stopper directement depuis le JavaScript, ce qui vous permettra de profiler une partie du code :

//-- démarrage du profilage

console.profile();

//--- code ...

...

//-- Fin du profilage
console.profileEnd();

Vraiment très pratique ! Et c’est fonctionnel également avec la version Windows.