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

1. for loop

2. boucle while

3. boucle à faire pendant

4. 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 = [&#39;prop1&#39;, &#39;prop2&#39;],      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

La prémisse de l'approche ci-dessus est que les propriétés internes de l'objet sont connues

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

---

Je crois que les amis qui viennent d'apprendre la programmation sont familiers avec l'écriture boucles

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

---

Nous pouvons également légèrement améliorer les performances en inversant l'ordre du tableau

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

---

Quelques derniers mots

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

Ce qui précède est du JavaScript Concernant les problèmes de performances des instructions de boucle, veuillez faire attention au site Web PHP chinois (www .php.cn) pour plus de contenu connexe !