javascript - JQuery 和 IE 的性能极度下降

Question

我使用以下查询按内容选择 2 个元素:

$('.a .b:contains("Padding Before"), .a .b:contains("Padding After")');

这个查询非常慢，在我的电脑上需要 2 秒才能执行。如果没有 :contains ，它将返回仅包含 11 个元素的数据集。

然后我尝试优化它:

$('.a .b:contains("Padding")'); // or similiar query, but the result set is the same - 2 elements

我使用internet explorer 10进行测试，预计修改后执行速度会快2倍。

与此相反，现在它的执行速度提高了数十倍或数百倍。

那么，查询串联怎么可能对查询性能产生如此极端的影响？

如果我执行相同的操作但使用 2 个查询，则可以将相同的查询速度提高 50-100 倍:

var n = $('.a .b:contains("Padding After")')
var m = $('.a .b:contains("Padding Before")');

这是 JQuery 1.8.23/IE 中的错误吗？或者导致性能下降的原因是什么？在 Chrome 上不存在此类问题。

Answer 1

用“,”分隔的多个选择器比多个选择慢的一个重要原因是:使用大选择器时要直接合并的所有 jQuery 集合会强制 jQuery 按照它们在文档中出现的顺序对它们进行排序。

我认为在您的情况下，“之前填充”和“之后填充”元素是相当交错的，因此导致合并重新排序时间很长。

关于“:contains”...如果您编写模板，您可能更喜欢为这些元素添加一个类。

通常，性能意味着使用您知道正在优化 DOM 端的选择器。