JQuery slice() 或 each() 的性能？答案

【问题标题】：JQuery slice() or each() for performance?JQuery slice() 或 each() 的性能？
【发布时间】：2012-05-19 13:31:14
【问题描述】：

$('.row').slice(0, 3).css('background-color: green');
$('.row').slice(4, 6).css('background-color: yellow');
$('.row').slice(6, 10).css('background-color: green');

或者

x = 0;
$('.row').each(function() {
   if (x >= 0 && x <= 3) {
      $(this).css('background-color: green');
   }
   if (x >= 4 && x <= 6) {
      $(this).css('background-color: yellow');
   }
   if (x >= 6 && x <= 10) {
      $(this).css('background-color: green');
   }
   x++;
});

一个比另一个快吗？

【问题讨论】：

标签： jquery performance each slice

【解决方案1】：

使用切片。每个都在每次迭代时进行比较。切片将只占用列。加上 slice 更好地表达了意图 - 这将允许更好的优化（如果有的话）并且代码更具可读性。

【讨论】：

@WesleyMurch 我不相信：jsperf.com/10543111/2 - 说句公道话，你只是抄袭提问者的错误。
@Carl 如果您正在优化它，那么优化两种情况，而不是一种：jsperf.com/10543111/3 ;) Slice 几乎快两倍。两个额外的 DOM 查询是第一个测试用例变慢的原因。
@valentinas 没有做你认为的事情。查看第一个测试输出。后面的 DOM 元素没有颜色。我修改我的有一个单一的 dom 查询，每个仍然排在首位。我还尝试给所有东西上色，然后只切黄色。
我还应该指出，我同意你的回答——因为 slice 更好地表达了意图——但它并没有严格回答这个问题。
我选择了div.row而不是.row；显然包括元素类型会减慢 jQ 的速度。我也知道.row 表现更好（出乎我的意料）。然而，这两个版本都接近最佳值，差异是微不足道的。幸运的是，我可以坚持我的主张，即slice 无论哪种方式都更具可读性；）

【解决方案2】：

完全使用您的示例并主要考虑性能，纯 css 解决方案可能更快：

.row:nth-child(-n+10) { background-color: green; }
.row:nth-child(-n+6)  { background-color: yellow; }
.row:nth-child(-n+3)  { background-color: green; }

顺序看起来颠倒了，但它的作用是：首先将前 10 名中的所有 10 项变为绿色，然后将前 6 项变为黄色，然后再次将前 3 项变为绿色。

但这仅适用于静态 html。如果您要动态更改选择，则确实使用 jquery.slice。

【讨论】：