Question

早上好，

仅仅是因为我对知识的渴望我对这个问题很感兴趣，如果有可能优化以下简单的功能。

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

可能会发生“.item”的选择器返回超过一百，在最坏的情况下甚至数千个元素，这实际上并不是很好。时间戳是添加到每个.item的数据属性的unix-timestamp值。

亲切的问候，

多米尼克

Answer 1

您可以尝试类似

的内容

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

示例：Profiling

Answer 2

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

Answer 3

jQuery增加了很多开销。只需使用vanilla 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更多的收益。

Answer 4

我认为你不能在第一时间解决它，但随后的电话，你可能会这样：

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

但我不知道这是否适合你的用例。

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

jquery选择器条件“属性”少于

4 个答案: