jquery each vs. native dla

Question

var arr=[]; 
var k; 
for(var i=0;i<5000;i++) 
arr[i]=i; 

console.time("native loop"); 
var len=arr.length; 
for(var j=0;j<len;j++) 
k=arr[j]; 
console.timeEnd("native loop"); 

console.time("jq loop"); 
$(arr).each(function(i,el){ 
k=el; 
}); 
console.timeEnd("jq loop"); 

Generuje, 14ms dla natywnej pętli i 3ms dla Jquery each.

Używam Jquery 1.6.2. Jeśli Jquery używa natywnej pętli za sceną, to dlaczego to możliwe?

Answer 1

Myślę, że ma to związek z zakresem zmiennej index - zmienna j jest globalną, która jest o najwolniejszym przypadku zmiennej dostępu. Za każdym razem, gdy twoja pętla musi odwoływać się do j, musi sprawdzić całą drogę łańcucha zasięgu, z powrotem do obiektu globalnego, a następnie pobrać z niego wartość zmiennej.

Otrzymuję podobne liczby w mojej konsoli (Chrome, OS X - 13-15ms dla pętli for, 3-4ms dla jQuery).

Ale, jeśli mogę to zrobić:

(function() { 
    console.time("native loop with function scope"); 
    var len=arr.length; 
    for(var j=0;j++<len;) 
     k=arr[j]; 
    console.timeEnd("native loop with function scope");})() 

on wykonywany w zaledwie 5ms.

Różnica w tym przypadku polega na tym, że j jest zmienną lokalną funkcji, dostępną natychmiastowo, gdy silnik JavaScript wyszukuje zmienne. len jest podobnie lokalny; jedynymi globalnymi w tym przypadku są k i arr.

Aby uzyskać jeszcze większą prędkość z tym zrobić k zmiennej funkcji, zakres i przekazać w arr jako parametr:

(function(arr) { 
    console.time("native loop 2"); 
    var len=arr.length, k; 
    for(var j=0;j++<len;) 
     k=arr[j]; 
    console.timeEnd("native loop 2");})(arr) 

> native loop 2: 0ms 

Dobrze, że to trochę zbyt szybko teraz. Może arr powinien być większy:

var arr=[]; 
for(var i=0;i<50000;i++) 
    arr[i]=i; 

[Try again...] 
> native loop 2: 1ms 

To spowolniło to nieco.

W przypadku macierzy 500 k elementów ten kod działa w 4ms w konsoli JavaScript na moim komputerze. Przy 5M zajmuje to 36 ms.

Należy również zauważyć, że nie używasz surowego wywołania jQuery.each() - najpierw owijasz tablicę w $(), tworząc obiekt jQuery, a następnie wywołując .each na tym. Bardziej uczciwym testem może być wykonanie tego samego testu, który powinien być całkiem zbliżony do czasu drugiego przykładu powyżej. jQuery dodaje trochę narzut; sprawdzanie typów jego argumentów, ale potem uruchamia dość ciasną pętlę.

Answer 2

Sprawdź to: http://jquery-howto.blogspot.com/2009/06/javascript-for-loop-vs-jquery-each.html

Answer 3

http://www.georgepaterson.com/2011/08/30/javascript-performance-jquery-each-and-each-versus-alternatives/jQuery.each jest przeznaczony do iteracji nad tablicami i tablicowymi obiektami.
Przeciwny wynik z linku Question.see
http://jsfiddle.net/martinaglv/NcRsV/