使用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端的选择器。