JQuery - select class 或是select id?

来源：互联网发布：网络运营者应当为编辑：程序博客网时间：2024/05/21 18:30

$("#someid")$(".someclass")$("[someattr='value']")

这三种选择那个才是最高效的？

ID查询肯定是最快的，部分原因是因为ID是唯一的，当在DOM中找到ID时API会自动停止继续查询。

如果必须使用class选择器的话，可以通过自定可选的上下文参数来提高效率。

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

$("#someid .someclass")

当时不同浏览器的运行效果却是不同的，下面是运行效果：

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

So among these big 3 modern browsers, the context parameter only seems to help IE9. Older browsers will also benefit from the context parameter. But considering the prevalence of each of these browsers and averaging everything out, the net gain is somewhat of a wash now.

And here's the code in case anyone wants to try it themselves...

<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>

0 0