Question

我在对象数组上进行非常频繁的迭代，并且一直在使用jQuery.each（）。但是，我有速度和内存问题，根据我的探查器，最常调用的方法之一是jQuery.each（）。街上有什么关于它的表现的话？我应该切换到简单的for循环吗？当然，我也在修复我自己的代码中的许多问题。

Answer 1

This article（＃3）运行了一些性能测试，发现jQuery .each函数的速度是本机javascript for循环的10倍。

^{来自10 Ways to Instantly Increase Your jQuery Performance - 3. Use For Instead of Each}
使用Firebug，可以衡量两个函数运行所需的时间。
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');
对于本机代码，上述结果为2ms，对于jQuery的“each”方法，结果为26ms。如果我在我的本地机器上测试它并且它们实际上没有做任何事情（仅仅是一个数组填充操作），jQuery的每个函数都需要JS本地“for”循环的10倍。在处理更复杂的事情时，这肯定会增加，例如设置CSS属性或其他DOM操作操作。

Answer 2

jQuery的源代码如下（感谢John Resig和MIT License）：

each: function( object, callback, args ) {
    var name, i = 0, length = object.length;

    if ( args ) {
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.apply( object[ name ], args ) === false )
                    break;
        } else
            for ( ; i < length; )
                if ( callback.apply( object[ i++ ], args ) === false )
                    break;

    // A special, fast, case for the most common use of each
    } else {
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.call( object[ name ], name, object[ name ] ) === false )
                    break;
        } else
            for ( var value = object[0];
                i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
    }

    return object;
}

正如您可以跟踪和查看的那样，在大多数情况下，它使用的是基本的for循环，其中唯一的开销实际上只是回调本身。不应该在性能上有所作为。

编辑：这意味着已经发生选择器开销，并且您将获得一个填充的数组object。

Answer 3

这种方法可以显着提高你的速度。

var elements = $('.myLinks').get(), element = null;
for (var i = 0, length = elements.length; i < length; i++) {
    element = elements[i];
    element.title = "My New Title!";
    element.style.color = "red";
}

缓存也可以提高性能。

function MyLinkCache() {
    var internalCache = $('.myLinks').get();

    this.getCache = function() {
        return internalCache;  
    }

    this.rebuild = function() {
        internalCache = $('.myLinks').get();
    }
}

使用中：

var myLinks = new MyLinkCache();

function addMyLink() {
    // Add a new link.
    myLinks.rebuild();
}

function processMyLinks() {
    var elements = myLinks.getCache(), element = null;
    for (var i = 0, length = elements.length; i < length; i++) {
        element = elements[i];
        element.title = "My New Title!";
        element.style.color = "red";
    }
}

Answer 4

确保从jquery中获得最大收益的一种方法是将返回的结果数组存储在变量中，而不是每次需要时都重新遍历DOM。

不做的示例：

$('.myLinks').each(function(){
    // your code here
});
$('.myLinks').each(function(){
    // some more code here
});

更好的练习：

var myLinks = $('.myLinks');
myLinks.each(function(){
    // your code here
});
myLinks.each(function(){
    // some more code here
});

Answer 5

使用本机功能通常更快而不是抽象，例如JQuery.each（）方法。但是，JQuery.each（）方法更容易使用，并且您需要更少的编码。

说实话，没有任何背景，任何人都不是正确或错误的选择。我认为我们应该首先编写更简单的代码，假设它是好的/合法的/干净的代码。如果你遇到一种情况，例如你所描述的情况，那里存在明显的滞后现象，那么就应该找出你的瓶颈所在并编写更快的代码。

在这些场景中替换JQuery.each（）方法可能有帮助，但是，如果没有看到你的代码，你可能会遇到与JQuery方法无关的瓶颈。

我应该使用jQuery.each（）吗？

5 个答案: