jQuery data-* vs 类选择器 - 性能？答案

【问题标题】：jQuery data-* vs class selector - performance?jQuery data-* vs 类选择器 - 性能？
【发布时间】：2013-01-04 07:23:49
【问题描述】：

我见过很多例子（包括最喜欢的 Twitter 的引导程序），其中各种 API 使用 $("[data-something]") 而不是按类选择 $(".something")

尽管如此，我还是试图找到有关这两个不同选择器之间性能的信息。我很惊讶许多性能测试确实发现这些选择器在大多数现代浏览器上都同样快，所以我决定做my own test

我现在真的很困惑，我不知道是我的测试做错了（不知何故？）还是我之前检查过的其他测试？

如果我在测试时做错了什么或者这些测试是否正确并且 data-attribute 选择器实际上比常规 class 慢得多，谁能提供更多信息选择器？

谢谢

【问题讨论】：

我认为是因为data-attribute 使用querySelectorAll 或在需要时发出嘶嘶声，而普通班级使用更快的getElementsByClassName。检查jsperf.com/class-vs-data-1
好吧，我明白这一点，但正如我之前阅读的那样，我惊讶地发现一些测试显示两个选择器的性能相同，这就是我自己进行测试的原因，现在我想确认这些测试是否正确。或者也许有人可以指出我做错了什么:)
我会说是的，这些结果对我来说似乎是正确的。但这很简单，除非你有一千个元素......
我相信对于千或任何其他大数字，数据属性选择器的元素结果应该更差，因为搜索正确元素的 DOM 会更大
可能重复：stackoverflow.com/questions/12496884/…

【解决方案1】：

使用属性选择器时，性能可能会因浏览器中的 querySelector 支持而异。 jQuery 将退回到一个慢得多的内置库（称为 SizzleJS）。

类名的选择会更快，因为它将始终使用 getElementsByClassName，这在所有常见的浏览器上都普遍支持。

在我看来，类的用途与数据属性不同。类将对元素进行“分类”，以便它们可以正确设置样式并创建结构。

数据属性就是：data。有时您需要在元素中存储其他数据。例如：

<table>
    <tr data-id="4" data-category="1">
        <td>Name</td>
        <td>Email</td>
    </tr>
</table>

请注意，出于同样的原因，我没有使用常规的“id”属性。

【讨论】：