使用 JQuery 和 IE 导致性能极度下降答案

【问题标题】：Extreme performance degradation with JQuery and IE使用 JQuery 和 IE 导致性能极度下降
【发布时间】：2013-04-09 19:48:05
【问题描述】：

我使用以下查询按内容选择 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 上没有这样的问题。

【问题讨论】：

据我所知，这不是错误，只是野兽的本性。在将无数个选择器训练成一个巨大的、单一的、漂亮的选择器时看起来很酷……它一直是一个巨大的性能下降。
我不知道具体原因，但this site 提供了一些关于如何提高 jQuery 选择器性能的提示...
这里有一篇有趣的文章gist.github.com/Raynos/1417030
首先，在选择课程时总是给出一个标签名称。否则，它必须查看页面上的每个元素以匹配类名。您还应该始终尝试从具有 ID 的元素开始，例如：$('#some_element div.class_name')...
我在 IE 中也注意到了类似的速度下降。请参阅 - jsperf.com/id-vs-class-vs-tag-selectors/2 - 了解详情

【解决方案1】：

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

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

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

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

【讨论】：