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.000ms

第三:~38000.000ms(是的,它是38秒.)

场景说明:我有很大的表,我正在迭代所有表行.这里Guid是表行的唯一键和类名.cell-taskname是table-row的每个第一列中的div,而.cell-text是包含text的span.

Answer 1

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

在第一个和第二个示例中,DOM的主要搜索仅适用于具有给定GUID类的元素.然后,您只在这些元素中搜索单元格.

但是在上一个例子中,使用单个选择器,引擎会执行以下操作:

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

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

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

如果有很多.cell-text元素且只有少数.<your-guid-here>元素,你可以看到它需要多长时间.你已经说过.<your-guid-here>元素是唯一的(在一张大表中只有一行),所以这里的性能差异很有意义.

有关此问题及其答案中从右到左匹配的更多信息.