Question de vitesse jQuery.each vs pour Loop

Vanilla JavaScript Loops vs JQuery.each: Une comparaison des performances

Cet article explore les différences de performances entre l'utilisation de boucles Vanilla JavaScript for et la méthode $.each de JQuery pour l'itération du tableau. Nous démontrerons que, pour la vitesse, les boucles de vanille for, en particulier celles avec une mise en cache variable, surpasse considérablement $.each. Cela peut entraîner des améliorations de vitesse allant jusqu'à 84%, comme le montre les repères JSPERF (lien omis pour la concision, mais facilement consultable).

jQuery.acha EXEMPLE:

<code class="language-javascript">$.each(myArray, function() {
  let currentElement = this; 
  // ... your code using currentElement ...
});</code>

pour la boucle avec une mise en cache variable (le plus rapide):

<code class="language-javascript">const len = myArray.length;
for (let i = 0; i < len; i++) {
  let currentElement = myArray[i];
  // ... your code using currentElement ...
}</code>

pour la boucle sans mise en cache variable:

<code class="language-javascript">for (let i = 0; i < myArray.length; i++) {
  let currentElement = myArray[i];
  // ... your code using currentElement ...
}</code>

Tentative de longueur pré-calculée: (performances similaires à la version mise en cache)

<code class="language-javascript">let len = myArray.length;
let i = 0;
for (; i < len; i++) {
  let currentElement = myArray[i];
  // ... your code using currentElement ...
}</code>

Questions fréquemment posées (FAQ):

Bien que cet article se concentre sur les performances, voici un résumé des principales différences et considérations pour choisir entre $.each et for LOOCS:

• Fonctionnalité: JQuery's $.each ittera les tableaux et les objets, offrant une syntaxe concise. for Les boucles fournissent un contrôle plus direct sur l'itération.

• Performance: for Les boucles (en particulier avec la mise en cache variable) sont généralement plus rapides en raison de la réduction des frais généraux d'appel de fonction. La différence devient plus prononcée avec des ensembles de données plus importants.

• lisibilité: $.each peut améliorer la lisibilité du code pour des itérations simples. for Les boucles sont plus explicites.

• Rompre la boucle: Retour false du rappel $.each rompt la boucle. for Les boucles utilisent break.

• Accès d'index: Les deux donnent accès à l'index actuel (bien que différemment).

• NodeList / HtmlCollection: $.each Fonctionne avec les nodelists et htmlcollections, mais this se réfère à un élément DOM, pas un objet jQuery. Enveloppez avec $(this) pour utiliser les méthodes jQuery.

• natif forEach: natif de JavaScript forEach offre une syntaxe similaire à $.each mais avec des performances potentiellement meilleures que la mise en œuvre de JQuery.

• itération d'objet: Les deux peuvent itérer les objets.

• Tableaux clairsemés: $.each sautent des indices non définis dans des tableaux clairsemés, tandis que les boucles for les incluent.

• Chaîne: $.each ne prend pas en charge le chaînage comme les autres méthodes jQuery.

En résumé, pour des performances optimales, en particulier lorsque vous traitez avec de grands ensembles de données, hiérarchisez les boucles JavaScript Vanilla for avec une mise en cache variable. JQuery's $.each est plus pratique pour les ensembles de données plus petits ou lorsque la lisibilité est primordiale. Considérez le natif de JavaScript forEach comme une alternative plus rapide à la $.each.

de jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!