[英]Should I use jQuery.each()?
我正在對對象數組進行非常頻繁的迭代,並且一直在使用jQuery.each()。 但是,我有速度和內存問題,根據我的探查器,最常調用的方法之一是jQuery.each()。 街上有什么關於它的表現的話? 我應該切換到簡單的for循環嗎? 當然,我也在修復我自己的代碼中的許多問題。
本文 (#3)運行了一些性能測試,發現jQuery .each函數的速度是本機javascript for循環的10倍。
從10種方式立即提高您的jQuery性能 - 3.使用而不是每個
使用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操作操作。
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
。
這種方法應該可以顯着提高速度。
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";
}
}
確保從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
});
使用本機功能通常比抽象更快 ,例如JQuery.each()方法。 但是,JQuery.each()方法更易於使用,並且您需要更少的編碼。
說實話,沒有任何背景,沒有一個是正確或錯誤的選擇。 我認為我們應該首先編寫更簡單的代碼,假設它是好的/合法的/干凈的代碼。 如果你遇到一種情況,例如你所描述的情況,那里存在明顯的滯后,那么就應該找出你的瓶頸所在並編寫更快的代碼。
在這些場景中替換JQuery.each()方法可能會有所幫助,但是,如果沒有看到您的代碼,則可能存在與JQuery方法無關的瓶頸。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.