jquery every 与 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");

它正在生成， native 循环 14 毫秒，Jquery 3 毫秒。

我正在使用 Jquery 1.6.2。如果 Jquery 在幕后使用 native 循环，那么怎么可能，这是可能的？

Answer 1

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

我在控制台中得到了与您类似的数字(Chrome、OS X - for 循环为 13-15 毫秒，jQuery 为 3-4 毫秒)。

但是，如果我这样做:

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

它的执行时间仅为 5 毫秒。

这种情况的区别在于，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 增加了一些开销；检查其参数的类型，但之后它会运行一个非常紧密的循环。