Ce qui est le plus rapide: $ .each,. ForEach, for-loop ou autre chose?

Lorsque vous comparez les boucles Jquery aux boucles javascript, vous devez vous rappeler que Jquery est implémenté à l'aide de javascript.

Toutes les fonctions de Jquery finissent finalement par exécuter le code javascript standard.

En tant que tel, cela signifie que dans la plupart des cas, le javascript natif sera plus efficace.

Ma boucle préférée pour la vitesse est:

for(var i, ilen = MAXLENGTH; i < ilen; i++){ } 

C'est à moins d'itérer via un objet javascript, auquel cas:

 for(var key in object){ if(object.hasOwnProperty(key)){ } } 

Ceci représente la majorité des cas d'utilisation en comparant Jquery à javascript.

 $('#elementid'); 

Est beaucoup plus lent que

 $(document.getElementById('elementId')); 

Avec une multitude d'autres exemples.

Jquery peut être utilisé pour rendre le code plus propre ou pour la compatibilité avec le navigateur croisé avant la version 2.

Cependant, dans des situations de haute performance, si vous pouvez garantir que vous ne devez supporter que les navigateurs modernes, javascript est généralement beaucoup plus rapide.

Probablement le natif pour la boucle (bien, partout sauf l'opéra, où foreach est plus rapide, mais c'est une autre histoire).

Cependant, 99,9% des cas sont vraiment importants .

Toujours préférez le code lisible sur un code plus rapide lorsque vous le pouvez. Tous ces types de boucles peuvent gérer des centaines de milliers d'itérations chaque seconde sur une machine moyenne.

Le code lisible est beaucoup plus important ici – si un $.each plus de 100 éléments semble plus lisible pour vous – par tous les moyens, faites cela (je préfère personnellement Array.forEach , principalement parce qu'il est natif et compatible avec native .map .filter .reduce etc). Si vous effectuez beaucoup de travail dans la boucle, la différence devient encore plus petite.

Disons que vous avez une méthode appelée doSomethingWithCurrent:

 for(var i=0;i<elements.length;i++){ var current = elements[i]; doSomethingWithCurrent(current); } 

Contre:

 elements.forEach(doSomethingWithCurrent); 

La seconde est probablement plus lente, mais elle est aussi beaucoup plus lisible (du moins pour moi), ce qui la rend plus durable.

Qu'en est-il du scénario suivant: vous avez un ensemble d'objets avec les noms et prénoms et vous souhaitez créer un nouveau tableau de chaînes contenant le nom complet:

Boucle simple:

 var new = []; for(var i=0;i<names.length;i++){ new.push(names[i].firstName+" "+names[i].lastName); } 

Utilisation de la carte:

 var new = names.map(function(elem){ return elem.firstName+" "+elem.lastName; }); 

Encore une fois, je trouve la seconde plus lisible, même si elle est plus lente. L'écriture d'un code lisible et lisible est souvent plus important que l'écriture de code rapide.

Cela dit, "ce qui est plus lisible" est souvent une question de goût personnel, il est important de rester cohérent.

Pour le désert – ayez Knuth:

Les programmeurs gaspillent énormément de temps à penser ou se soucier de la rapidité des parties non critiques de leurs programmes, et ces tentatives d'efficacité ont réellement un fort impact négatif lors du débogage et de la maintenance. Nous devrions oublier les petites efficiences, dire environ 97% du temps: l'optimisation prématurée est la racine de tout le mal. Pourtant, nous ne devrions pas laisser passer nos opportunités dans ce 3% critique.

Quand il s'agit de JavaScript, je suis souvent déchiré entre la vitesse brute et sachant que la fonction existe.

Selon Mozilla, Array.forEach n'est pas pris en charge dans IE jusqu'à IE9.

En tant que tel, je l'éviterais à peu près en fonction de la normale for boucles, car JSPerf se déroule beaucoup plus rapidement dans Chrome (au moins), ou bon vieux $.each de JQuery parce que vous pouvez compter sur le fait qu'il est là et il sera Probablement commencer à utiliser Array.forEach interne à un moment donné de toute façon.