在jQuery中,按类或id进行选择是否比按其他属性进行选择更快?

| 基本上是
$(\"#someid\")
要么
$(\".someclass\")
比...快
$(\"[someattr=\'value\']\")
我可以想象这是(也就是说,按id选择是最快的,然后是类,然后是属性),但是有人可以肯定吗?     
已邀请:
        ID绝对是最快的。部分原因是ID应该是唯一的,因此在DOM中找到ID后,API会停止搜索。 如果必须使用类或属性选择器,则可以通过指定可选的上下文参数来提高性能。 例如...
$(\".someclass\", \"#somecontainer\")
其中
somecontainer
类似于div,围绕着surrounding5ѭ类的元素。在“ 4”仅占DOM的一小部分的情况下,这可以提供巨大的性能优势。 更新: 几年前,我围绕context参数做了一些测试。阅读以下评论后,我很好奇是否有任何更改。确实,当今的浏览器似乎情况有所改变。也许它也与jQuery的改进有关?我不知道。 这是我经过10,000次迭代的结果(下面的代码): IE9
$(\".someclass\")
-2793毫秒
$(\".someclass\", \"#somecontainer\")
-1481毫秒 铬12
$(\".someclass\")
-75毫秒
$(\".someclass\", \"#somecontainer\")
-104毫秒 Firefox 3.6
$(\".someclass\")
-308毫秒
$(\".someclass\", \"#somecontainer\")
-357毫秒 因此,在这三大现代浏览器中,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>
    
        按ID选择是最快的,因为它直接映射到getElementByID,另外2个必须检查每个元素以确定所选元素。 如果必须选择使用类或属性,请尝试将搜索包含在ID中。 例如
$(\"#someid .someclass\")
    
        ID是唯一的,如果您只想在此处选择一个/第一个元素   $(\“#someid \”)=> 75,695 ops / sec,最快      $(。unique_class \')=> 45,257操作/秒,慢40%:页面上只有一个类      $(\“。someclass \”)。first()=> 42,217 ops / sec,慢46%:页面上有多个类,请选择第一个元素      $(\“。someclass:eq(0)\”)=> 18,324 ops / sec,慢76%:页面上有多个类,在选定索引处选择元素 测试网址:http://jsperf.com/jquery-selector-speed-tests/98     
        ID和类选择器,至少是单独使用时,对于jQuery或CSS而言往往更快。这主要是由于浏览器在其DOM / CSS引擎中具有针对ID和类的优化算法。 在使用最新版本jQuery的现代浏览器中,任何被浏览器理解为受支持的CSS选择器的选择器字符串都将由ѭ15进行处理,只要使用标准CSS选择器即可提供最佳性能。 jQuery和/或Sizzle库会处理非标准选择器或较旧的浏览器,它们会尽最大努力利用DOM的get-element方法来遍历DOM。 要记住的最重要的一点是,由于DOM实现的不同,性能会因浏览器(版本)而异。至少,我就是这么认为的。     
        该ID在页面上唯一,因此将始终是最快的。类“可能”比属性要快,但要取决于属性。 真正的关键是选择一个类别,ID可能不会比选择类别更快。这将取决于页面和浏览器。在我的测试中,选择一个复杂页面,其中包含数量有限的元素,其中包含一个“ class”,其中class元素的父元素具有一个id,例如:
<div id=\'iamout\'>
  <div class=\'aonther\'>
    <div class=\'iamin\'>stuff</div>
    <div class=\'iamin\'>stuff</div>
  </div>
</div>
诸如
$(\'.iamin\',\'#iamout\')
这样的选择器并不总是与
$(\'.iamin\')
一样快 并非所有浏览器都支持按类名进行选择(本机),但是现代/较新的浏览器都支持按类名进行选择,因此根据您使用的浏览器的不同,它可能会提供更好的性能。 如果需要最佳性能,则需要测试您的确切页面。     
        id是最快的,因为它是唯一可以具有该标识符的元素。许多对象可能具有相同的类名。有人可以验证这一点,但是一旦找到ID,似乎就不需要再遍历文档了。对于班级,情况可能并非如此??高温超导     

要回复问题请先登录注册