JQuery选择器性能和比较问题

JQuery selector performace and comparesion issue

本文关键字：比较 问题 性能 选择器 JQuery      更新时间：2023-09-26

这三个操作执行的是同一件事。有人能解释一下不同表现的原因吗?

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');

first: ~3500.000ms

第二:女士~ 3700.000

第三:女士~ 38000.000 (是的38秒。

场景说明:我有一个巨大的表，我正在迭代所有表行。这里Guid是表行的唯一键和类名。

Cell-taskname是每个table-row第一列中的div， .cell-text是包含文本的span。

这一切都与选择器的处理方式有关从右到左

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

但是在上一个示例中，使用单个选择器，引擎会这样做:

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

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

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

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

更多关于从右到左的匹配的内容

假设你有100行guid，每100个。cell-taskname在其中，每100个。cell-text在其中。

    100 guid
  • 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)

在第三个(我的第一个)场景中，您使用201万个元素

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

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

相关文章：