如果使用自定义属性选择器而不是使用 jQuery 的长混合类/标签选择器，性能会有所提高吗？

Question

我注意到我们团队中的一些开发人员正在创建长 jQuery 选择器，例如：

'div.someclass > span.someotherclass ...'

我知道，jQuery 将尝试对类和标签使用本机 DOM 方法，但我认为使用精简版的东西是否会更有效：

'[data-gid="my-element-group"]'

而不是那些长的混合类/标签选择器。

自定义属性选择器会比长类/标签选择器更快吗？还是取决于具体情况？为 Javascript 密集的网站选择哪种方法？

PS 我想，如果 HTML 设计者和 Javascript 编码器分开工作，那些长选择器也是危险的 - 设计者可能仅仅通过更改 CSS 类或移动标签来破坏 Javascript 功能。但如果他们看到 ids 和 data-gids，他们可以不理会它们，这应该更安全......但它会牺牲性能吗？

PPS 我不关心无效的 HTML4，因为自定义属性，性能对于我的大多数客户来说更为重要。

Answer 1

选择器越长应该越快。这是一个例子。给定以下 HTML：

<div class="testDiv">
    <span class="testSpan"></span>
</div>
<div>
    <span data-group="testSpan"></span>
</div>

和以下 jQuery：

var elems1 = $("div.testDiv > span.testSpan");
var elems2 = $("[data-group='testSpan']");

这是快速测试的结果：

但是，值得注意的是，在现实世界中，差异很小，您应该使用其中的一个最适合你。

您可以通过使其更具体来使您的 data-* 选择器稍微好一些（性能方面）：

var elems = $("span[data-group='testSpan']");

但另一个快速测试表明（至少在 Chrome 15 中对我来说），较长的选择器仍然获胜。

我认为在不支持 querySelectorAll 的旧浏览器中，差异会更加明显，有利于较长的选择器，它可以使用本机 getElementsByTagName。