jQuery data-*vs class selector - 性能？

Question

我见过很多例子(包括最喜欢的Twitter的bootstrap),其中各种API都使用$("[data-something]")而不是按类选择$(".something")

尽管如此,我还是试图找到这两种不同选择器之间的性能信息.令我感到惊讶的是,许多性能测试确实发现那些选择器在大多数现代浏览器上同样快,所以我决定自己做测试

我现在真的很困惑,我不知道这是我的测试是错误的(不知何故？)还是我之前检查过的其他测试？

如果我在测试时做错了,或者这些测试是否正确,并且数据属性选择器IS实际上比常规类选择器慢得多,那么任何人都可以提供更多信息吗？

谢谢

Answer 1

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

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

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

数据属性正是这样的：数据。有时您需要在元素中存储其他数据。例如：

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

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