Maison > Article > interface Web > Problèmes de performances avec les instructions de boucle JavaScript
Dans la plupart des langages de programmation, les instructions de boucle consomment la plupart du temps
Et les instructions de boucle sont un modèle de programmation très important
Dans notre JavaScript, il existe quatre types de boucles
for loop
boucle while
boucle à faire pendant
boucle for-in
Les trois premières boucles sont également très courantes dans d'autres langues
La boucle for-in peut être nouvelle pour les étudiants qui ont étudié C/C à l'école
Elle recherchera des exemples et des propriétés de prototype, cela entraîne donc plus de surcharge par itération
La boucle for-in finit par être seulement 1/7 aussi rapide que les trois autres types
Donc, à moins que nous n'ayons explicitement besoin de parcourir un nombre inconnu d'objets de propriétés, sinon nous devrait essayer d'éviter d'utiliser for-in
, encore moins une boucle for-in pour parcourir le tableau
Nous pouvons itérer un objet clair comme celui-ci
var props = ['prop1', 'prop2'], i = 0;while(i < props.length){ fn(obj[props[i++]]); }<.>Ce code crée un tableau d'attributs d'objet basé sur les attributs de l'objet, puis utilise une boucle while pour parcourir la liste d'attributs et traiter les valeurs d'attribut correspondantes
De cette façon, il n'est pas nécessaire de rechercher chaque attribut de l'objet, ce qui réduit la surcharge de boucle
Si nous ne connaissons pas l'implémentation interne de l'objet
Nous avons toujours devons gérer les propriétés de l'objet lui-même, et nous ne pouvons le faire que
for(var prop in obj){ if(obj.hasOwnProperty(prop)){ //... } }Le coût est que chaque itération doit déterminer si la propriété est la propriété propre de l'objet plutôt que héritée.
À l'exception du for-in, les performances des autres boucles sont similaires, alors utilisez Vous devez tenir compte des besoins et choisir le type de boucle
for(var i = 0; i < arr.length; i++){ fn(arr[i]); }Chaque fois que cette instruction de boucle est itérée, nous devons rechercher l'attribut length dans arr, ce qui prend beaucoup de temps
Pour pouvoir optimiser,
for(var i = 0, len = arr.length; i < len; i++){ fn(arr[i]); }mettre en cache la valeur de la longueur du tableau dans une variable locale, afin que le problème soit résolu
Il en va de même pour while, do-while
En fonction de la longueur du tableau, cela peut économiser environ 25 % du temps d'exécution dans de nombreux navigateurs
for(var i = items.length; i--;){ process(items[i]); }
var j = items.length;while(j--){ process(items[j]); }
var k = items.length - 1;do { process(items[k]); }while(k--);De cette façon, chaque condition de contrôle d'itération est jugée à partir de deux fois (si le nombre d'itérations est inférieur au nombre total, si c'est vrai)
est réduit à un jugement (si c'est vrai), améliorant encore la vitesse de boucle
Nous avons peut-être tous utilisé des méthodes de tableau telles que arr.forEach() ou des méthodes d'itération de framework telles que $().each() de jQuery. Pour parcourir un tableau,
Ces méthodes exécutent une fonction sur chaque élément du tableau
Bien qu'elles soient pratiques, elles sont beaucoup plus lentes qu'une boucle normale (appelant une méthode externe)
Dans tous les cas, l'itération basée sur une boucle est environ 8 fois plus rapide qu'une itération basée sur une fonction
Donc nous essayons d'utiliser ces boucles ordinaires (for, while, do-while) lorsque nous pouvons résoudre le problème