Question

基本上是

$("#someid")

或

$(".someclass")

比

快

$("[someattr='value']")

我会想象它是（也就是说，通过id选择最快，然后是类，然后是属性），但是有人知道吗？

Answer 1

ID绝对是最快的。部分原因是ID应该是唯一的，因此API在DOM中找到ID后停止搜索。

如果必须使用类或属性选择器，则可以通过指定可选的上下文参数来提高性能。

例如......

$(".someclass", "#somecontainer")

其中somecontainer类似于div，围绕具有类someclass的元素。在somecontainer包含DOM的一小部分的情况下，这可以提供巨大的性能优势。

更新：

我几年前在context参数周围做了一些测试。阅读下面的评论后，我很好奇是否有任何改变。事实上，现在的浏览器似乎已经有所改变。也许它也与jQuery的改进有关？我不知道。

以下是10,000次迭代的结果（代码如下）：

<强> IE9

$(".someclass") - 2793 ms

$(".someclass", "#somecontainer") - 1481 ms

Chrome 12

$(".someclass") - 75 ms

$(".someclass", "#somecontainer") - 104 ms

Firefox 3.6

$(".someclass") - 308 ms

$(".someclass", "#somecontainer") - 357 ms

所以在这三大现代浏览器中，context参数似乎只对IE9有所帮助。较旧的浏览器也将受益于context参数。但考虑到这些浏览器的流行程度，并将所有浏览器平均化，现在净收益有点过时了。

以下是代码，以防有人想自己尝试...

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                startTime = new Date().getTime();               
                for (i = 0; i < 10000; i++)
                {
                    s = $(".someclass");
                }           
                $("#withoutcontext").html(elapsedMilliseconds(startTime));


                startTime = new Date().getTime();
                for (i = 0; i < 10000; i++)
                {
                    s = $(".someclass", "#somecontainer");
                }           
                $("#withcontext").html(elapsedMilliseconds(startTime));

            });

            function elapsedMilliseconds(startTime)
            {
                var n = new Date();
                var s = n.getTime();
                var diff = s - startTime;
                return diff;
            }
        </script>
    </head>
    <body>
        <h1>jQuery Selector Performance: Context vs No Context</h1>

        <h2>$(".someclass")</h2>
        <span id="withoutcontext">---</span> ms<br /><br />

        <h2>$(".someclass", "#somecontainer")</h2>
        <span id="withcontext">---</span> ms<br /><br />

        <hr />

        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <div id="somecontainer">
            <p class="a">a</p>
            <p class="b">b</p>
            <p class="c">c</p>
            <p class="someclass">someclass</p>
        </div>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
    </body>
</html>

Answer 2

按ID选择是最快的，因为它直接映射到getElementByID，另外2个必须检查每个元素以确定所选元素。

如果必须使用类或属性进行选择，请尝试将搜索括在ID中。离。

$("#someid .someclass")

Answer 3

ID和类选择器，至少在它们自己使用时，往往更快，无论是jQuery还是CSS。这主要是因为浏览器在DOM / CSS引擎中为ID和类优化了算法。

在具有最新版本jQuery的现代浏览器中，浏览器理解为支持的CSS选择器的任何选择器字符串都将由document.querySelectorAll()处理，只要使用标准CSS选择器，就可以提供最高性能。非标准选择器或旧浏览器由jQuery和/或Sizzle库负责，它们尽最大努力利用DOM的get-element（s）方法来遍历DOM。

最重要的是要记住，由于不同的DOM实现，性能会因浏览器（版本）和浏览器（版本）而异。至少，这就是我相信的事情。

Answer 4

ID是唯一的，如果你只想在这里选择一个/第一个元素

$（“＃someid”）=＆gt; 75,695 ops / sec，最快

$（。unique_class'）=＆gt; 45,257 ops / sec，慢40％：页面上只有一个课程

$（“。someclass”）。first（）=＆gt; 42,217 ops / sec，慢46％：页面上有多个类，选择第一个元素

$（“。someclass：eq（0）”）=＆gt; 18,324 ops / sec，76％慢：页面上有多个类，选择所选索引处的元素

测试网址：http://jsperf.com/jquery-selector-speed-tests/98

Answer 5

id永远是最快的，因为它在页面上是唯一的。类“可能”比属性更快，但它取决于。

这里真正的踢球者是选择一个类，ID可能不比选择类更快。它取决于页面和浏览器。在我的测试中，选择具有有限数量元素的复杂页面，其中“class”具有id元素的父元素，例如：

<div id='iamout'>
  <div class='aonther'>
    <div class='iamin'>stuff</div>
    <div class='iamin'>stuff</div>
  </div>
</div>

$('.iamin','#iamout')之类的选择器并不总是与$('.iamin')

一样快

并非所有浏览器都支持按类名（本机）进行选择，但现代/新版浏览器支持选择，因此它可能会提供更好的性能，具体取决于您拥有的浏览器。

如果您需要获得最佳性能，则需要测试您的确切页面。

Answer 6

Id是最快的，因为它是唯一可以拥有该标识符的元素。许多对象可能具有相同的类名。有人可以验证这一点，但似乎一旦找到id就不需要再遍历文档了。对于课程，情况可能并非如此？ HTH

在jQuery中，按类或id选择比通过其他属性选择更快？

6 个答案: