a[data="what"] vs a.what vs a#what 选择器性能答案

【问题标题】：a[data="what"] vs a.what vs a#what selector performancea[data="what"] vs a.what vs a#what 选择器性能
【发布时间】：2011-12-10 15:34:26
【问题描述】：

只是想知道 [data="what"] 伪性能的选择器性能如何，如果有人对此有很好的文章/基准或任何个人经验？

基本上，我在 HTML 中添加了 data-eid、data-mid、data-sid 以及 HTML5 元素，例如：

<section data-mid="1">
    <article data-eid="1">
        <a data-sid="1"></a>
        <a data-sid="2"></a>
        <a data-sid="3"></a>
    </article>
    <article data-eid="2">
        <a data-sid="4"></a>
        <a data-sid="5"></a>
        <a data-sid="6"></a>
    </article>
</section>
<section data-mid="2">
    <article data-eid="3">
        <a data-sid="7"></a>
        <a data-sid="8"></a>
        <a data-sid="9"></a>
    </article>
    <article data-eid="4">
        <a data-sid="10"></a>
        <a data-sid="11"></a>
        <a data-sid="12"></a>
    </article>
</section>

非常想在 jQuery 中使用它来选择我页面上特定的 m e 和 s 东西。我知道 m 是一个部分，e 是一篇文章，s 是一个锚。

我通常会在 jQuery 中使用 $('.m[mid="1"]') 之类的东西进行选择，但它是否比 $('section[mid="1"]') 快得多...我猜不是？

我只是不想让用户在我的代码中下载额外的 class="m" 负载。我知道目前我正在将我的前端与我的 JS 端代码绑定在一起，方法是强制元素为某种类型，其中 class="m" 将在未来将其解耦为任何类型。

你怎么看？

【问题讨论】：

我个人在这种情况下使用一个类，但这是一个值得提出的问题。
听说 CSS 分析器要来了：bricss.net/post/13884376788/the-css-profilers-are-coming
@Cyrille：这可以在 jsperf.com 上测试，因为它实际上是 JavaScript。
Here is a jsperf test 在按类查找和按属性查找之间。

标签： jquery css jquery-selectors css-selectors

【解决方案1】：

当我编写的 HTML 旨在与控制行为的不显眼的 JavaScript 进行通信时，我会这样做：

<div class='some-behavior' data-param-for-behavior='whatever' data-another-param='12'>

然后代码可以根据类名应用自己，这（在现代浏览器中）非常快，并使用“.data()”获取参数。

按类名获取：

var elementsToControl = $('.some-behavior');

在现代浏览器中方式比

快

var elementsToControl = $('[data-param-for-behavior]');

edit — 令人惊叹 — 带有标签名称的 by-attribute 方法比 Chrome 中的 by-class 更快。我也将尝试使用标签名称按类... 再次编辑不。男孩，有时我只是想知道:-)

【讨论】：

我喜欢在性能方面将属性选择器和类选择器视为竞争对手。
@BoltClock 运行良好，而 Firefox 的表现符合我的预期，我对 Chrome 感到非常惊讶。我想我会愚弄测试并进一步混淆HTML；目前这些元素都是<div> 元素，因此与许多不同标签的混合也可能很有趣。我什至都懒得尝试 IE，但那当然也很有趣。

【解决方案2】：

您的问题标题似乎与问题文本不匹配。如果您特别询问a[data="what"]、a.what 和a#what 中的哪一个，那么您已将它们按性能升序排列。您还应该能够将 a#what 简化为 #what，因为无论如何 ID 仅适用于单个元素。

【讨论】：

觉得我必须添加这个，因为 [css-selectors] 标记（仍然是）在原始问题中：样式表中的 ID 选择器预计将应用于 all 具有该 ID 的元素，无论 HTML 规范怎么说。这与document.getElementById() 不同，如果有这样一个元素，它总是一次返回一个元素。
仅仅因为您可以拥有多个具有相同 ID 的元素并不意味着您应该这样做。虽然您当然可以在 jQuery 选择器中使用一个 ID 来检索多个元素，但让多个元素具有相同的 ID 是一个坏主意。

【解决方案3】：

在this stack question 中，他们还讨论了 JQuery 选择器的性能，其中一个答案专门讨论了about IDs，而且一般来说，它们比其他任何东西都快...

【讨论】：

【解决方案4】：

这是一个有趣的问题，但我认为您正在优化一些不需要优化的东西。我会检查两件事：

这些 mid/sid/eid 元素有多少？不到一万？好的。
您的 Web 服务器是否启用了 gzip 压缩？是的？好的。

您可以使用 Chrome 或 Firefox 的内置调试工具查看您的页面，以了解下载和运行实际需要多长时间。

不要刻薄或居高临下，只是根据经验说话。另外，其他人已经发布了很好的链接！ :)

祝你好运！

【讨论】：

【解决方案5】：

您应该只在示例中使用类选择器，原因如下：

[attr] 选择器很慢并且不向后兼容（好吧，自定义属性也不向后兼容）（@Pointy，[attr] 可以比 . 更快，通过使用命名存储桶，但这不是然而大多数浏览器的情况）

# 选择器超级快，但 id 必须是唯一的，元素只能有一个 id，并且文档中的所有 id 都会自动成为 javascript 中 window 对象的属性（在所有浏览器中）。

. 选择器速度快、向后兼容并且没有限制，如上所述。

【讨论】：

属性选择器并没有那么慢。