我应该使用的！each()?

Question

我做的非常频繁的迭代过阵列的目的和已使用的！each().然而，我要具有速度和存储器问题的一个方法称为据我分析器是的！each().有什么话在街上关于它的性能吗？我应该换一个简单的循环?当然我是固定的许多问题在我自己的代码。

Answer 1

有jQuery的每个的源代码如下（谢谢约翰·雷西格和MIT许可证）：

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 2

这篇文章 (#3)进行了一些性能的测试发现的！每个功能是大约10倍，因为放缓地javascript循环。

^{从 10种方式立即增加你的jQuery的性能-3.使用，而不是每}
使用 萤火虫, ，这是可以测量的时间，每两个功能需要运行。

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

上述结果为2毫秒地代码，26ms技术的"每次"的方法。提供我的测试，它在我的地方机和他们实际上不做任何东西(仅仅只是一个填充阵列操作)。的每个功能需要超过10次，只要JS母"的"循环。这肯定会增加当处理更复杂的东西，如设置CSS属性或其他DOM操作的操作。

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（）方法是更容易使用，并且需要在您的部分少的编码。

如实，没有一个是没有任何上下文中的正确或错误的选择。我认为我们应该先写代码更容易的oppinion，假设它的好/ legilble /干净的代码。如果你进入的情况下，如您所描述的一个，在那里有一个明显的滞后，比它的时间来找出你的瓶颈和写入速度更快的代码。

在这些情况下更换JQuery.each（）方法的可能的帮助，但是，没有见过你的代码，很可能你无关了jQuery方法的瓶颈。