jQuery選擇與條件「屬性」小於

只是我的知識的渴望，我感興趣的問題，如果有優化下面的簡單功能的可能性。

$('.item').each(function(){ 
    var el = $(this); 
    if (el.data('timestamp') < 1374033452) 
     el.addClass('processed'); 
});

可能發生，對於選擇「.item」過百的回報，在最壞的情況下甚至數千個元素，這是不是真的表現非常好。時間戳是一個添加到每個.item的數據屬性的unix時間戳值。

親切的問候，

多米尼克

來源

2013-07-17 Dominik Habichtsberg

如果時間戳在HTML。接着，添加使用的getAttribute可能更快。但我不知道這是否會產生真正的影響。 –

最好在CodeReview.SE上詢問這個問題，因爲它是關於工作代碼的。 –

如果您不得不多次發佈這些信息，可能會安排後續評估速度更快的事情。 – mvw

的jQuery增添了不少的開銷。你可以去快十倍以上通過只用香草JS：

var elements = document.getElementsByClassName('item'); 
for (var i=elements.length; i-->0;) { 
    if (elements[i].getAttribute('data-timestamp') < 1374033452) { 
    elements[i].className = 'processed'; 
    } 
}

（注意，我認爲你可以取代所有類，而不僅僅是加）

JSPerf

但是性能問題，你經驗可能更多地與reflow的成本相關，而不是簡單的JavaScript執行。例如，如果processed類更改元素的尺寸，則可能會強制進行大回流。有可能在這裏找到比單純的jQuery/JavaScript更多的收穫。

來源

2013-07-17 06:20:19

+1原生 –

@ArunPJohny我剛剛在Firefox上進行了測試（請參閱[perfs]（http://jsperf.com/jquery-each-vs-filter/2））。結果令人印象深刻，也許很奇怪... –

男人，看起來不錯:) –

你可以嘗試像

$('.item').filter(function(){ 
    return $(this).data('timestamp') < 1374033452 
}).addClass('processed');

樣品：Profiling

來源

2013-07-17 06:06:05

會更快嗎？我不明白爲什麼。 –

@dystroy邊緣根據此分析http://jsperf.com/jquery-each-vs-filter –

這很有趣。有一個真正的收益。這可能與addClass函數開始時的大量開銷有關。從我+1。 –

$('.item').addClass(function(){ 
    return this.getAttribute('data-timestamp') < 1374033452 ? 'processed' : ''; 
});

來源

2013-07-17 06:13:45 adeneo

+1再次您的情況逆轉，現在是一個邊際+ 3％http://jsperf.com/jquery-each-vs-filter –

@ArunPJohny - 哦，沒注意到我扭轉了這種情況，謝謝。至於速度，它是如此微不足道，無論如何不重要，但我很驚訝，使用本地getAttribute時，過濾器比這個更快。 – adeneo

我不認爲你可以圍繞解決它的第一次，但後續調用，你可能可能與此：

$(".item:not('.processed')").each(function(){ 
    var el = $(this); 
    if (el.data('timestamp') < 1374033452) 
     el.addClass('processed'); 
});

但我不知道這是否符合您的用例。

http://api.jquery.com/not-selector/

來源

2013-07-17 06:24:52

jQuery選擇與條件「屬性」小於

回答

相關問題