javascript - JQuery 选择器性能和比较问题

Question

所有三个操作都在执行相同的操作。 谁能解释不同性能的原因？

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.000 毫秒

第三:~38000.000 毫秒(是的，它是 38 秒。)

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

Answer 1

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

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

但在您的最后一个示例中，使用单个选择器，引擎会执行以下操作:

1. 列出所有 .cell-text元素。

2. 删除没有祖先匹配 .cell-taskname 的那些从列表中。

3. 删除所有没有祖先匹配 .<your-guid-here> 的剩余的从列表中。

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

有关从右到左匹配的更多信息，请参阅 this question and its answers .