jquery each vs. native for

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");

原生循环生成14毫秒，Jquery生成3毫秒。

我使用Jquery 1.6.2。如果Jquery在后台使用原生循环，那么这怎么可能呢?

Answer 1

我认为这与索引变量的作用域有关——您的j变量是全局变量，这是变量访问最慢的情况。每次你的循环必须引用j时，它都需要检查作用域链，回到全局对象，然后从那里获取变量值。

我在我的控制台得到类似的数字(Chrome, OS X - 13-15ms for循环，jQuery 3-4ms)。

但是，如果我这样做:

(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");})()

执行时间为5ms。

在这种情况下的不同之处在于j是一个函数局部变量，在JavaScript引擎查找变量时立即可用。len同样是局部的;在这种情况下，唯一的全局变量是k和arr。

为了获得更快的速度，将k作为函数作用域变量，并将arr作为参数传入:

(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

嗯，那现在有点太快了。也许arr应该更大一些:

var arr=[];
for(var i=0;i<50000;i++)
    arr[i]=i;
[Try again...]
> native loop 2: 1ms

这使它慢了一点。

对于一个500k元素的数组，这段代码在我机器上的JavaScript控制台中运行仅需4毫秒。在5M时，需要36ms。

您还应该注意，您没有使用原始的jQuery.each()调用—您首先将数组包装在$()中，创建一个jQuery对象，然后在其上调用。each。更公平的测试可能是运行

$.each(arr, function(i,el){
    k=el;
});

这应该非常接近上面第二个示例的时间。jQuery增加了一些开销;检查它的参数类型，但之后它会运行一个相当紧密的循环。

Answer 2

检查: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设计用于迭代数组和类数组对象。
与你的问题相反。看到链接http://jsfiddle.net/martinaglv/NcRsV/