L’optimisation de votre code est l’un des moyens les plus efficaces d’améliorer les performances de votre application. Le debounce et le throttling sont deux techniques essentielles d’optimisation du code en JavaScript. L’utilisation de ces deux techniques vous aidera à améliorer l’expérience utilisateur de votre application, et vous permettra également d’économiser pas mal d’argent.
Le comportement par défaut de l’accès au DOM
Avant de plonger dans le debounce et le throttling, vous devez comprendre pourquoi ces deux techniques sont importantes à l’aide d’un exemple de code.
Créer un index.html et y coller le code suivant :
<input type="text" />
<div>
<b>Default:</b>
<span id="default"></span>
</div>
<div>
<b>Debounce:</b>
<span id="debounce"></span>
</div>
<div>
<b>Throttle:</b>
<span id="throttle"></span>
</div>
<script src="script.js" />
Le premier élément est une entrée pour la collecte d’informations. Il y a ensuite trois éléments divs et d’un span pour l’affichage du texte en mode par défaut, en mode « debounce » et en mode « throttling ». L’objectif de ces éléments est de démontrer et de comparer les trois techniques entre elles.
Créer l’élément script.js et commencez par sélectionner tous les éléments de la page :
const input = document.querySelector('input')
const defaultText = document.getElementById('default')
const debounceText = document.getElementById('debounce')
const throttleText = document.getElementById('throttle')
Pour un examen approfondi des méthodes d’accès au DOM telles que querySelector()Pour comprendre ce qu’est la navigation dans le DOM en JavaScript, il faut comprendre ce qu’est la navigation dans le DOM.
Ensuite, ajoutez un écouteur d’événement à l’entrée. Celui-ci prend simplement ce qui est saisi dans le formulaire et le transmet comme contenu interne du premier champ span élément :
input.addEventListener("input", e=> {
defaultText.textContent = e.target.value
})
Lorsque vous tapez quelque chose dans votre entrée, le texte s’affiche sur la page comme le montre l’image suivante.
Cette méthode d’impression par défaut fonctionne lorsque vous travaillez localement sur votre ordinateur. Le processus est très rapide et n’entraîne aucun problème de performance, quelle que soit votre connexion réseau. Cela s’explique par le fait que vous stockez tout localement sur votre page. Le problème se pose lorsque vous obtenez des données d’un serveur externe.
Le problème des appels de fonctions multiples
Imaginons que l’entrée soit une boîte de saisie automatique. Lorsque vous tapez quelque chose dans la boîte, le serveur est interrogé sur un ensemble d’informations. Par exemple, vous pourriez interroger la base de données pour récupérer tous les mouvements qui contiennent le terme matrice qui s’y trouve.
Voici le problème : à mesure que vous tapez chaque caractère, le code envoie une toute nouvelle requête parce que le entrée est déclenché chaque fois que vous saisissez un nouveau caractère.
Ainsi, lorsque vous tapez m, il va faire une requête pour tous les films qui commencent par m. Lorsque vous faites mail envoie une autre requête et renvoie les films commençant par ma. Et ainsi de suite.
En tapant le mot matricenous adressons six requêtes à notre serveur. Cela ne va pas seulement causer des problèmes d’interface utilisateur, mais c’est aussi un énorme fardeau pour ceux qui utilisent votre code. En effet, ils doivent effectuer six requêtes réseau, ce qui va ralentir l’application s’ils disposent d’une connexion lente.
C’est là que le débouclage et l’étranglement entrent en jeu. Ces deux techniques permettent de conserver les ressources en effectuant moins de requêtes. Au lieu d’appeler une fonction à chaque fois, elle ne l’appelle qu’après un délai déterminé. Ce délai sera différent selon qu’il s’agit de debouncing ou de throttling (les deux méthodes fonctionnent différemment).
Utiliser la technique du débouclage
Plutôt que d’appeler une fonction à chaque fois que vous tapez un caractère dans un champ de saisie, la technique du « debounce » consiste à appeler la fonction et à attendre un certain temps (par exemple une seconde).
Si rien ne change dans ce laps de temps, la fonction est appelée. Mais si, au cours de cette seconde, vous tapez un autre caractère, la fonction s’en aperçoit et réinitialise la temporisation au délai spécifié (une seconde).
Essentiellement, la fonction debounce attend pendant un certain temps (fixé par vous), et si rien ne change pendant ce temps, elle appelle la fonction. Mais s’il y a un changement, la minuterie est réinitialisée. La technique du debounce peut être mieux comprise à l’aide d’un peu de code.
Sous le premier écouteur d’événement, créez une fonction nommée debounce. Vous passerez une fonction de rappel à debounce, ainsi qu’un délai par défaut d’une seconde.
function debounce(cb, delay = 1000) {
return (...args) => {
setTimeout(() => {
cb(...args)
}, delay)
}
}
En gros, vous forcez la fonction à attendre une seconde avant d’exécuter la fonction de rappel. Ensuite, passez la fonction debounce à updateDebounceText. Donnez-lui une fonction de rappel qui prend un texte en argument et met à jour le champ debounceText avec le contenu textuel.
const updateDebounceText = debounce((text) => {
debounceText.textContent = text
})
Le rappel est une fonction anonyme, ce qui est une façon spéciale d’écrire des fonctions en JavaScript. Enfin, appelez la fonction updateDebounceText à l’intérieur de l’écouteur d’événement, de sorte qu’elle accède au texte saisi et l’imprime sur la page :
input.addEventListener("input", e=> {
defaultText.textContent = e.target.value
updateDebounceText(e.target.value)
})
Enregistrez le fichier et accédez à votre navigateur. Lorsque vous tapez dans le formulaire, vous remarquez un délai d’une seconde jusqu’à ce que le texte apparaisse à côté de Débondage.
Ce n’est pas exactement comme cela que fonctionne la technique du débouclage. Vous ne faites que retarder les choses d’une seconde.
Au lieu de cela, vous voulez vous assurer que tous ces appels de fonction pour chaque caractère ne s’exécutent pas avant que vous n’ayez fini de tout taper. Pour ce faire, vous devez désactiver un délai d’attente à chaque fois que vous appelez la fonction. Voici le code modifié pour cela :
function debounce(cb, delay = 1000) {
let timeout
return (...args) => {
clearTimeout(timeout)
timeout = setTimeout(() => {
cb(...args)
}, delay)
}
}
Ainsi, à chaque fois que votre entrée change, vous appelez la fonction updateDebounceText qui efface le délai d’attente initial et démarre un nouveau délai d’une seconde. Par conséquent, la fonction attend qu’il y ait un délai d’au moins une seconde avant d’exécuter à nouveau le callback.
L’image ci-dessous capture la page juste après avoir tapé le dernier caractère du formulaire :
Dans ce cas, il met à jour toutes les entrées en une seule fois. En effet, à chaque fois que nous tapons un nouveau caractère, le timer se réinitialise, ce qui explique pourquoi le caractère n’a pas été ajouté à la page.
Le débouclage est vraiment utile dans ces scénarios où vous voulez envoyer des informations après un certain délai plutôt qu’à chaque mise à jour.
Comprendre la technique de l’accélérateur
La technique de l’étranglement est un peu différente de celle du débouclage. Tout comme le débouclage, l’étranglement retarde l’appel à la fonction. Mais au lieu d’attendre que tout soit terminé, il envoie continuellement une nouvelle requête avec le dernier lot d’informations.
Ainsi, si votre délai est de quatre secondes, la fonction d’étranglement enverra le premier lot de caractères, attendra quatre secondes, puis enverra le nouveau lot de caractères que vous avez saisis pendant le délai.
La technique d’accélération est utile lorsque plusieurs choses changent et que vous souhaitez envoyer uniquement la mise à jour la plus récente. Un exemple de cas d’utilisation serait le redimensionnement ou le défilement d’une fenêtre. Vous voulez connaître la position de l’utilisateur, mais vous ne voulez pas appeler la méthode des centaines de milliers de fois.
La technique d’étranglement permet de limiter la puissance dont l’unité centrale a besoin. Voici la fonction « throttle » :
function throttle(cb, delay = 1000) {
let shouldWait = false
return(...args) => {
if (shouldWait) return
cb(...args)
shouldWait = true
setTimeout(() => {
shouldWait = false
}, delay)
}
}
La première fois que vous appelez throttle()il appelle immédiatement votre fonction de rappel. Et chaque fois que vous l’appelez, elle ne fait rien jusqu’à ce que votre délai soit terminé. Une fois le délai terminé, vous réinitialisez devraitAttendre pour faux (qui exécute le code et répète le processus).
Appeler la fonction « throttle » et passer le callback :
const updateThrottleText = throttle((text) => {
throttleText.textContent = text
})
Ensuite, appelez la fonction dans le gestionnaire d’événements :
input.addEventListener("input", e=> {
defaultText.textContent = e.target.value
updateDebounceText(e.target.value)
updateThrottleText(e.target.value)
})
Maintenant, si vous tapez dans la zone d’entrée, les caractères sont mis à jour par lots à intervalles d’une seconde. L’image suivante capture la page juste avant la sortie du deuxième lot de caractères (ix).
En savoir plus sur l’optimisation de JavaScript
Un code optimisé est essentiel pour améliorer la vitesse et les performances globales de votre application. JavaScript est naturellement un langage rapide, mais de mauvaises pratiques de codage peuvent nuire aux performances de votre application. C’est pourquoi vous devez vous familiariser avec les différentes techniques d’optimisation du code JavaScriot si vous voulez être un développeur de premier plan.