Bonjour les amis.
Aujourd’hui, je vais vous donner 2-3 tuyaux pour optimiser votre script Javascript. Sachez qu’il y a quelques petits astuces toutes simples qui permettront à votre script d’être bien moins gourmand en ressource.
C’est parti !
Stockage de données récurrentes
En javascript, il vous arrivera souvent de récupérer une valeur ou plutôt un nombre d’éléments du même type, afin de pouvoir leur appliquer la même manipulation.
Prenons un exemple concret. Vous souhaitez… rendre… tous les liens rouge… (C’est un exemple… rangez moi ces armes blanches…)
<script>
var LiensDuSite = document.getElementsByTagName('a'); //
for(i = 0; i < LiensDuSite.length; i++) {
// Je colore mon lien en rouge
}
</script>
Votre script fonctionne. Alléluia ! Oui, mais à quel prix ?
Ici, notre script va calculer la longueur du tableau dans la boucle grâce à « LiensDuSite.length ». Le seul problème, c’est qu’il va le calculer à chaque passage dans la boucle. Autant dire que si votre tableau contient 3000 données, les ressources utilisées pour rien seront importantes, et aussi utile que la St-Yorre pour Olivier de Kersauson.
Voici une façon de faire qui évitera toute utilisation de ressources inutiles.
<script>
var LiensDuSite = document.getElementsByTagName('a'); //
var NombreDeLiens = LiensDuSite.length;
for(i = 0; i < NombreDeLiens; i++) {
// Je colore mon lien en rouge
}
</script>
Seule différence de ce script avec le précédent: le stockage de la longueur du tableau (donc du nombre de liens dans notre exemple) dans une variable avant le début de la boucle.
Ici, peu importe la longueur du tableau, elle ne sera calculée qu’une seule fois, et utilisée comme délimiteur dans la boucle.
Limitation de l’accès au DOM.
Autre chose qu’il faut savoir. L’accès aux éléments du DOM sont couteux en ressources. Dans la même logique que l’astuce précédente, il vaudra donc mieux stocker chaque objet du DOM dans une petite variable qui va bien.
<script>
document.getElementById('mon_lien').style.color = 'red'; // On passe mon jolie lien en rouge
document.getElementById('mon_lien').style.textDecoration='underline'; // Et on le souligne
// Code équivalent
var mon_lien = document.getElementById('mon_lien');
mon_lien.style.color = 'red';
mon_lien.style.textDecoration='underline';
</script>
Ces deux extraits de code sont équivalents, pourtant le deuxième consommera moins de ressources, car l’appel au DOM ne se fera qu’une seule fois, contrairement au premier qui l’appellera deux fois.
Ces astuces sont plutôt simples en soi, mais elles vont devenir primordiales si votre script commence à prendre de la longueur. Plus votre script sera lourd, et plus ces optimisations seront importantes.
Alors, pensez-y !
A bientôt les amis.
Laissez un commentaire