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 上没有这样的问题。

score 0 · Accepted Answer

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

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

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

一般而言，性能意味着使用您知道的选择器在 DOM 方面进行了优化。

1 回答 1