Fermer

août 22, 2019

Debouncing et étranglement en JavaScript


Cet article décrit deux techniques importantes, le rebond et la limitation, pour améliorer les performances de votre site Web. En savoir plus sur ces deux concepts à l'aide d'exemples concrets et voir comment les appliquer vous-même.

Dans cet article, nous aborderons les techniques de rebond et de limitation qui non seulement améliorent les performances de votre site Web, mais évitent également Appels d'API et chargement sur le serveur.

Des techniques de rebouncing et de limitation sont utilisées pour limiter le nombre de fois qu'une fonction peut être exécutée. Généralement, le développeur décide du nombre de fois ou du moment où une fonction sera exécutée. Mais dans certains cas, les développeurs donnent cette possibilité aux utilisateurs. À présent, il appartient à l'utilisateur de décider quand et combien de fois exécuter cette fonction.

Par exemple, les fonctions associées à des événements tels que cliquez sur le bouton de souris et redimensionner la fenêtre permet à l’utilisateur de décider quand il veut les exécuter et combien de fois. Parfois, les utilisateurs peuvent effectuer ces actions plus souvent que nécessaire. Cela peut ne pas être bon pour la performance du site Web, surtout si les fonctions attachées à ces événements effectuent des calculs lourds. Dans de tels cas, où les utilisateurs ont le contrôle de l’exécution des fonctions, les développeurs doivent concevoir des techniques permettant de limiter le nombre de fois où les utilisateurs peuvent exécuter la fonction.

Considérons un exemple de barre de recherche sur un site Web. Chaque fois que vous tapez quelque chose dans la barre de recherche, une API appelle les données du serveur à partir des lettres saisies dans la barre de recherche.

Voyons le code. Par souci de simplicité, nous n’avons pas transmis le paramètre (c’est-à-dire le mot saisi par l’utilisateur dans la barre de recherche) à la fonction makeAPICall .

issue "title =" issue "/> <img decoding=

Voici le fichier HTML de la barre de recherche:

searchbar.html

 < html > 
     < body > 
         <  label >  Rechercher  </  label > 
        
         < input    type  =  " texte "   id  =  " de recherche [boîtederecherche "  /> 
        
         < p >  Nbre d'événements déclenchés  </  p > 
         < p   id  = [19659011] ' show-api-call-count '  > 19659016]  </  p > 
     </  corps [19659011]> 
    
     < script   src  =  " issueSansDebounceThrottling.js "  >    [/ ] script > 
 </  html >

Voici le fichier JavaScript de la barre de recherche:

issueWithoutDebounceThrottling.js

 var  searchBoxDom  =  document .  getElementById  -box ') ; 
 function   makeAPICall  ()   {
} 
searchBoxDom .  addEventListener  ( 'input'   function   ()   {
  var  de A à Z  de A à Z
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link