Hacks JavaScript
Aujourd’hui je vais vous montrer quelques hacks JavaScript, qui pourront vous aider à optimiser vos codes (en terme de taille) chose utile lors des concours qui imposent une limitation de taille.
Ce petit article va vous montrer les méthodes que je connais, il en existe surement d’autres et je ne demandes qu’à les connaitre !
Regroupement des variables
Lorsqu’un groupe de variables sont initialisées avec la même valeur, au lieu de les déclarer séparément il est clairement plus simple de faire une seul déclaration :
1 2 3 4 5 6 7 | // Code non optimisé var a=1; var b=1; var c=1; // Code optimisé var a=b=c=1; |
Ainsi on passe de 24 à 12 bytes, c’est donc un gain considérable et à mon sens la déclaration est bien plus simple à relire.
Récupérer un élément
Généralement lorsqu’on souhaites manipuler un élément, on fait appel à la méthode document.getElementById(), et bien sachez que l’on peut récupérer ce même élément avec d’autres méthodes.
Le point commun des éléments de la page et bel est bien le corps de la page (body), et bien on va l’utiliser pour récupérer un de ses « enfant ».
Voici l’exemple de page que nous allons utiliser :
1 2 3 4 5 6 7 | <html> <head><title>Exemple</title></head> <body> <div id="a"></div> <div></div> </body> </html> |
Maintenant nous allons voir comment récupérer les deux div à l’aide de document.body.
En premier lieu nous avons un div qui possède un ID, un simple document.body.a nous permet donc de récupérer l’élément.
Dans le deuxième cas il va falloir utiliser le tableau d’enfants de body (document.body.children), et indiquer la position du div.
Nous voulons récupérer le deuxième élément de la page or dans un tableau, l’indexation commence à 0 (donc ce div sera le numéro 1), ce qui donne : document.body.children[1].
Au final on voit qu’on gagne très peu en taille mais justement ça se joue souvent à très peu de choses, donc il est bon de garder cette méthode à l’esprit 
Les conditions
Voici une partie où l’on peut gagner pas mal de bytes très simplement.
Je vais vous montrer tout d’abord une petite astuce qui pourra peut être vous servir :
1 2 3 4 5 | // Code non optimisé if (a > 10 && a < 20 && b > 30 && b < 40) { } // Code optimisé if (a > 10 & a < 20 & b > 30 & b < 40) { } |
J’ai volontairement conservé les espaces pour la lisibilité, mais en fait on voit que && peut dans la plupart des cas être remplacé par &, et dans ce cas on gagne quand même 3 caractères !
Voici maintenant la partie la plus intéressante, l’opérateur ternaire. En fait il s’agit d’optimiser une condition simple de type if/else, avec une seule condition dans le if, et une seule action à effectuer dans les deux cas !
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // Exemple #1 //Code non optimisé if (a == 10) b = 20; else b = -20; // Code optimisé b = (a == 10) ? 20 : -20; // Exemple #2 // Code non optimisé if (a == 10) alert('pile'); else alert('poil'); // Code optimisé (a == 10) ? alert('pile') : alert('poil'); |
Une dernière petite chose, quand on cherche à vérifier qu’une variable n’est pas égale à zéro :
1 2 3 4 5 | // Code non optimisé if (a != 0) { } // Code optimisé if (a) { } |
En effet quand une variable est égale à 0/null/false il est considéré qu’elle n’existe pas puisqu’elle est nulle.
Math.floor()
Pour finir je vais vous montrer une astuce plutôt sympa, si on cherches à arrondir à l’entier en dessous : |0
1 2 3 4 5 | // Code non optimisé alert(Math.floor(2.5)); // Code optimisé alert(2.5|0); |
Cette méthode fait quand même gagner 10 bytes donc imaginez si on répète l’opération plusieurs fois !
Conclusion
Je pense avoir fait le tour des différentes méthodes permettant de gagner quelques bytes, j’en ai surement oublié (peut-être même certaines que je connais) mais je complèterai cette liste si le besoin s’en fait.
Un dernier petit conseil pour l’optimisation utilisez packer pour minifier vos codes. C’est le meilleur compresseur JavaScript que j’ai pu trouver jusqu’à ce jour !