JQuery - select class 或是select id?

最新推荐文章于 2022-08-31 11:04:35 发布

WaterMelonkeke

最新推荐文章于 2022-08-31 11:04:35 发布

阅读量698

点赞数

分类专栏： HTML5 Jquery

HTML5 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Jquery

5 篇文章 0 订阅

订阅专栏

$("#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>

WaterMelonkeke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery - select class 或是select id?

$("#someid")$(".someclass")$("[someattr='value']")这三种选择那个才是最高效的？ID查询肯定是最快的，部分原因是因为ID是唯一的，当在DOM中找到ID时API会自动停止继续查询。如果必须使用class选择器的话，可以通过自定可选的上下文参数来提高效率。$(".someclass", "#somecontainer")$("
复制链接

扫一扫