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

Question

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

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

我知道，jQuery 会尝试对类和标签使用本地 DOM 方法，但我认为使用 lite this 会更有效：

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

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

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

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

附言由于自定义属性，我不关心无效的 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']");

这是来自quick test 的结果：

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

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

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

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

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