有人可以解釋為什么此測試顯示jquery $ .each比本地速度快嗎？

Question

我正在Chrome的瀏覽器控制台中運行以下測試。 我想看看原生的速度快了多少，才發現結果顯示jquery $ each更快？ 我知道這不是真的，但如果可能的話，我想解釋一下。

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

Answer 1

這可能是由於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) 該函數內部的代碼已編譯並運行得更快。