JQuery 选择器性能和比较问题答案

【问题标题】：JQuery selector performace and comparesion issueJQuery 选择器性能和比较问题
【发布时间】：2014-08-11 08:11:19
【问题描述】：

所有三个操作都在执行相同的操作。任何人都可以解释不同性能的原因吗？

console.time('first');
for(guid in ALLGUID){   
   $('.'+guid).find('.cell-taskname').find('.cell-text').text()
}
console.timeEnd('first');

console.time('second');
for(guid in ALLGUID){
 $('.'+guid).find('.cell-taskname .cell-text').text()
}
console.timeEnd('second');

console.time('third');
for(guid in ALLGUID){
 $('.'+guid+' .cell-taskname .cell-text').text()
}
console.timeEnd('third');

首先：~3500.000ms

秒：~3700.000ms

第三个：~38000.000ms（是的，它是 38 秒。）

场景说明：我有一个巨大的表，我正在遍历所有表行。这里 Guid 是表行的唯一键和类名。 cell-taskname 是 table-row 的每个第一列中的 div，而 .cell-text 是包含文本的 span。

【问题讨论】：

这里我无法解释性能差异，但是如果 GUID 是唯一键，为什么将其用作类名而不是元素 id？按 id 选择比按类选择要快得多。
不只是一点点：jsperf.com/getelementbyid-id-vs-queryselector-class（你甚至看不到类选择器的栏，getElementById 让你不知所措）。
@pdw 以上问题是我的问题，它只是试图解释我的问题。它是我的问题的极其简化的版本。顺便说一句，我正在使用 ID 选择器。 TY
我知道这个事实 ;)

标签： javascript jquery performance

【解决方案1】：

这一切都与选择器被处理从右到左这一事实有关。

在您的第一个和第二个示例中，DOM 的主要搜索仅针对具有给定 GUID 类的元素。然后，您只需在这些元素中在中搜索单元格。

但在您的最后一个示例中，使用单个选择器，引擎会这样做：

列出所有.cell-text 元素。
从列表中删除没有与.cell-taskname 匹配的祖先的那些。
从列表中删除没有与.<your-guid-here> 匹配的祖先的任何剩余的。

如果有很多 .cell-text 元素而只有少数 .<your-guid-here> 元素，您可以看到这需要更长的时间。您已经说过 .<your-guid-here> 元素是唯一的（大表中的一行），因此性能差异在这里是有意义的。

this question and its answers 中有关从右到左匹配的更多信息。

【讨论】：

【解决方案2】：

假设您有 100 行带有 GUID，每个行包含 100 个 .cell-taskname，每个行包含 100 个 .cell-text。

100 个向导
10000 .cell-taskname
1000000 .cell-text

选择器是从右到左完成的，所以如果您要执行第三个示例：

select all .cell-text (1m)
eliminate those that don't an ancestor .cell-taskname (still 1m)
eliminate those that don't have a higher ancestor of .guid (10k)

如果你做第一个：

select all .guid (1)
find all cell-taskname in that (100)
select all cell-text in those (10000)

在第 3 个（我的第一个）场景中，您使用 201 万个元素

在第一个（我的第二个）场景中，您只使用 10101 个元素。所以这就是为什么它要快得多:-)

当然，这些并不是确切的性能数字，但它确实解释了选择器优化背后的概念...

【讨论】：