Question

只是想知道如果有人对这个或任何个人经历有好的文章/基准，那么[data =“what”]伪表现的选择器性能是什么样的？

基本上我用HTML5元素编写了数据开发，数据中，数据sid的HTML：

<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是一个锚。

我通常会使用像$('.m[mid="1"]')这样的东西来选择jQuery，但是它比$('section[mid="1"]')快得多......我猜不是吗？

我只是不想让用户在我的代码中下载额外的class =“m”。我知道目前我正在用我的JS端代码绑定我的前端，强制元素成为某种类型，其中class =“m”将它解耦为将来的任何东西。

您怎么看？

Answer 1

您的问题标题似乎与问题文字不符。如果您具体询问a[data="what"]，a.what和a#what中的哪一个，那么您会按性能递增顺序列出它们。您还应该能够将a#what简化为#what，因为ID无论如何都只适用于单个元素。

Answer 2

当我编写旨在与不引人注意的JavaScript进行通信的HTML时，我会这样做：

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

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

按类名取词：

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

在现代浏览器中

比

更快方式

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

编辑 - 哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇我也会尝试使用标签名称的同类... 再次编辑 nope。男孩，有时我只是想知道： - ）

Answer 3

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

Answer 4

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

这些mid / sid / eid元素有多少？不到10,000？行。
您的网络服务器是否启用了gzip压缩？是？行。

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

不要试图吝啬或屈尊俯就，而只是从经验中说出来。另外，其他人已经发布了很好的链接！：）

祝你好运！

Answer 5

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

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

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

.选择器快速，向后兼容，没有任何限制，如上所述。

a [data =“what”] vs a.what vs a＃what selector performance

5 个答案: