Vanille JavaScript Loops vs. Jquery.each: Ein Leistungsvergleich
Dieser Artikel untersucht die Leistungsunterschiede zwischen der Verwendung von Vanille -JavaScript for
-Hleiben und der $.each
-Methode von JQuery für die Array -Iteration. Wir werden demonstrieren, dass Vanilla for
Loops, insbesondere solche mit variablem Caching, $.each
erheblich übertreffen. Dies kann zu Geschwindigkeitsverbesserungen von bis zu 84%führen, wie in JSPERF -Benchmarks gezeigt (Link für Kürze weggelassen, aber leicht durchsuchbar).
jQuery.each Beispiel:
$.each(myArray, function() { let currentElement = this; // ... your code using currentElement ... });
Für die Schleife mit variablem Caching (am schnellsten):
const len = myArray.length; for (let i = 0; i < len; i++) { let currentElement = myArray[i]; // ... your code using currentElement ... }
für Schleife ohne variable Zwischenspeicherung:
for (let i = 0; i < myArray.length; i++) { let currentElement = myArray[i]; // ... your code using currentElement ... }
Vorkalkulierter Längenversuch: (ähnliche Leistung wie die zwischengespeicherte Version)
let len = myArray.length; let i = 0; for (; i < len; i++) { let currentElement = myArray[i]; // ... your code using currentElement ... }
häufig gestellte Fragen (FAQs):
Während sich dieser Artikel auf die Leistung konzentriert, finden Sie hier eine Zusammenfassung der wichtigsten Unterschiede und Überlegungen zur Auswahl zwischen $.each
und for
Loops:
Funktionalität: jQuery's $.each
iteriert über Arrays und Objekte, die eine kurze Syntax bieten. for
Loops bieten eine direktere Kontrolle über die Iteration.
Leistung: for
Loops (insbesondere mit variablem Caching) sind im Allgemeinen aufgrund des reduzierten Funktionsaufrufaufenthaltes schneller. Der Unterschied wird mit größeren Datensätzen stärker ausgeprägt.
Lesbarkeit: $.each
Kann die Code -Lesbarkeit für einfache Iterationen verbessern. for
Loops sind expliziter.
Die Schleife durchbricht: Rückgabe false
aus dem $.each
Rückruf bricht die Schleife. for
Loops verwenden break
.
Indexzugriff: Beide bieten Zugriff auf den aktuellen Index (wenn auch unterschiedlich).
nodelist/htmlcollection: $.each
funktioniert mit Nodelisten und HTMLCollections, aber this
bezieht sich auf ein DOM -Element, nicht auf ein JQuery -Objekt. Wickeln Sie mit $(this)
um JQuery -Methoden zu verwenden.
Native forEach
: JavaScripts native forEach
bietet eine ähnliche Syntax wie $.each
, aber mit einer potenziell besseren Leistung als Jquerys Implementierung.
Objekt -Iteration: Beide können über Objekte iterieren.
Spärliche Arrays: $.each
überspringt undefinierte Indizes in spärlichen Arrays, während for
Loops enthalten.
Ketten: $.each
unterstützt das Erketten nicht wie andere jQuery -Methoden.
Zusammenfassend, für eine optimale Leistung, insbesondere beim Umgang mit großen Datensätzen, priorisieren Sie Vanille -JavaScript for
-Hleiben mit variablem Caching. JQuery's $.each
ist für kleinere Datensätze oder wenn die Lesbarkeit von größter Bedeutung ist. Betrachten Sie JavaScripts native forEach
als eine schnellere Alternative zu Jquerys $.each
.
Das obige ist der detaillierte Inhalt vonGeschwindigkeitsfrage jQuery.each vs. für die Schleife. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!