有人可以解释为什么这个测试显示jquery $ .each比本机更快吗?

时间:2016-02-11 16:23:53

标签: javascript jquery for-loop each

我在Chrome浏览器控制台中运行以下测试。我想看看原生的速度有多快,只是发现结果显示jquery $每个更快?我知道这不是真的,但如果可能,我想要一个解释。

var array = new Array();
for (var i = 0; i < 10000; i++) {
    array[i] = 0;
}

console.time('native');
var l = array.length;
for (var i = 0; i < l; i++) {
    array[i] = i;
}
console.timeEnd('native');

console.time('jquery');
$.each(array, function(i) {
    array[i] = i;
});
console.timeEnd('jquery');

native: 26.160ms
jquery: 5.665ms

如果我在setTimeout()中放入相同的代码,那么结果如下:

native: 0.123ms
jquery: 0.885ms

1 个答案:

答案 0 :(得分:2)

这可能是由于Chrome编译功能而不是在功能之外编译控制台输入。编译的函数运行得更快。 jQuery.each已经编译(当时jQuery被包含在页面上)。

将您的第一个测试包含在一个立即调用的函数中(Chrome可以在执行之前编译),并且您将看到非常相似的结果:

console.time('native');
(function(){
    var l = array.length;
    for (var i = 0; i < l; i++) {
        array[i] = i;
    }
})();
console.timeEnd('native');

console.time('jquery');
// ... unchanged
console.timeEnd('jquery');

native: 3.518ms
jquery: 3.308ms

这就是为什么当您将代码置于setTimeout setTimeout(function() { ... }, 1)之类的woocommerce_my_account_my_orders_query中时,您会看到根本不同的结果。函数内部的代码编译后运行得更快。