Un « onresize » ou « onscroll » plus performant en JS

Also available in: English

Si vous pratiquez couramment le JS, vous avez certainement remarqué que certains évènements sont déclenchés de manière assez ponctuelle, et d’autres peuvent être déclenchés de manière très fréquente et devenir assez difficile à gérer, c’est le cas de « onscroll » et « onresize » par exemple.

Lorsque vous implémentez un écouteur d’évènement sur l’un de ces évènements (je vais prendre « onresize » pour les exemples suivants), vous verrez rapidement, au redimensionnement de la fenêtre, que ceux-ci sont exécutés à chaque changement de pixel dans la largeur de la fenêtre.

2016 Update : Regardez du côté de window.requestAnimationFrame() qui peut aussi être d’une bonne aide.

Le code utilisé la plupart du temps

Souvent, et de manière assez simple, nous implémentons un écouteur de la sorte :

window.addEventListener('resize', function(){
  console.log('resizing');
});

Si vous ajoutez ça dans les scripts JS de votre projet, et que vous ouvrez la page sur votre navigateur, vous constaterez en ouvrant votre console (F12) et en redimensionnant la fenêtre, que la console s’affole un peu.
Imaginez qu’à la place d’un console.log() votre script fasse un contrôle dans le DOM, change la structure sous certaines conditions (largeur d’écran, visibilité d’un élément, par exemple), etc. etc., et ce à chaque pixel du redimensionnement…

Ne vous moquez pas, on est d’accord que le redimensionnement de la fenêtre ainsi fait n’est pas fréquent chez l’utilisateur, mais c’était la méthode d’un client pour tester si le responsive marchait bien, et il trouvait que ça ramait un peu sur son Mac. Je ne lui en veux pas, il a probablement lu quelque part que le responsive c’est quand on redimensionne la fenêtre de son navigateur.

Bref, on peut optimiser la fréquence d’exécution de tout ce code au redimensionnement, voyons cela.

« C’est le même, mais en différent »

Le principe est de créer un timeout qu’on lance au redimensionnement et qu’on détruit au redimensionnement. Oui je sais, c’est bizarre comme logique, mais vous allez comprendre.

var the_timer;
 
window.addEventListener('resize', function(){
  clearTimeout(the_timer);
  the_timer = setTimeout(function(){
    console.log('resized');
  }, 75);
});

Pour vous donner une courte explication, il suffit de lire le code de manière linéaire : au moment du redimensionnement, nous supprimons le timeout (cela arrête l’exécution de la fonction en paramètre), puis nous lançons le timeout. Celui-ci possède un délai d’exécution de 75 millisecondes. Donc, si entre le premier déclenchement de « resize » et le second, moins de 75 ms se sont écoulées, le timeout est réinitialisé avant même l’exécution de la fonction en premier paramètre. Vous m’avez suivi ?
Ce qui fait que cela fonctionne, c’est la variable (globale) the_timer déclarée avant l’écouteur.

Et voilà, c’est un peu mieux quand même. La fréquence, ou « sensibilité » se règle au nombre de millisecondes (ici 75) renseigné pour le timeout. Au plus vous augmentez ce chiffre, au moins le contenu de votre fonction sera exécuté rapidement.

Cette méthode n’est pas forcément adaptée à tous les cas pour tous les projets, notamment dans le cadre de l’évènement « onscroll », mesurez donc bien l’impact de cette implémentation 🙂

J’espère que cette astuce vous sera utile.