jQuery ID与Class性能对比之一

最近一直在做网站的优化方面的工作，在实际优化的过程中逐渐发现yahoo的34条只能作为一个大的方向，除此之外还有很多地方值得前端工程师关注的。结合最近的优化体会及实地测试，现发出来一部分供大家批评指正：

看网上看过很多ID和class选择器的对比，其实没有经过自己的测试，一般来说很难在自己写代码的时候注意这些，所以希望各位前端大神在某些方面有疑问时，最好自己编代码测试。以下是本人的代码及测试结果：

一、只查找一层的选择器，即没有子元素的选择器上，设置的条件及得出的结果如下，比较可以得出ID选择器有很大的优势，查找时间基本上是Class选择器的1/5不到。

测试页面的行数大概为1000行，

需要查找的代码：<p id="iDTest" class="iDTest">sssss</p>

查找逻辑：

<script>

$(function(){

    alert(findById()+"sss"+findByClass());

})

function findById(){

    var time_before = new Date();

    var second = time_before.getTime();

        for(var i=0;i<10000;i++){

            var ID_test = $("#iDTest");

        }

    var time_after = new Date();

    var second_after = time_after.getTime();

    return (second_after - second);

}

function findByClass(){

    var time_before = new Date();

    var second = time_before.getTime();

        for(var i=0;i<10000;i++){

            var class_test = $(".iDTest");

        }

    var time_after = new Date();

    var second_after = time_after.getTime();

    return (second_after - second);

}

</script>

测试结果：

浏览器 ID选择器 class选择器

ff（21.0） 276ms 1375ms

chrome（27.0） 15ms 45ms

safari（5.1.7） 18ms 50ms

IE（7） 550ms 52910ms

IE（8） 553ms 2870ms

IE（9） 285ms 1249ms

IE（10） 288ms 1273ms

二、查找的当前元素是通过父元素查找时

代码行数为：1000行

需要查找的代码：<div class="test2">

                     <p class="test3"></p>

                   </div>

                   <div id="test2">

                     <p class="test3"></p>

                   </div>   

查找逻辑：

<script>

$(function(){

    alert(findById()+"sss"+findByClass());

})

function findById(){

    var time_before = new Date();

    var second = time_before.getTime();

        for(var i=0;i<10000;i++){

            //var ID_test = $("#test2").find(".test3");

            var ID_test = $("#test2 .test3");

        }

    var time_after = new Date();

    var second_after = time_after.getTime();

    return (second_after - second);

}

function findByClass(){

    var time_before = new Date();

    var second = time_before.getTime();

        for(var i=0;i<10000;i++){

            //var class_test = $(".test2").find(".test3");

            var class_test = $(".test2 .test3");

        }

    var time_after = new Date();

    var second_after = time_after.getTime();

    return (second_after - second);

}

</script>

具体的结果数据就不贴出来了，大体的结果是ie7-10、safari、chrome依次递减，并且除了ie7（3955ms/58196ms）之外，其他的差别id选择器和class选择器差别不大。

在代码中，注释了用find方法查找的代码，我用了find方法测试了下，结果这种方法在safari和chrome下的查找时间仅为不用find方法的1/10，但是其他的浏览器下，find方法的class选择器查找时间增加了50%左右，id选择器时间基本上没有什么变化；但是现在就PC

端来说，safari和chrome的市场占有率还不是很高，建议在涉及到此类查找时，最好不要用find这种链式写法。

总体比较，id选择器的查找时间较class选择的器的较少，因此建议在选择器的选择时，可以选择ID选择器，最好用ID选择器，对于这种简单的页面，可能在实际应用中使用id和class选择器时，很难发现其区别，但是在有些函数与scroll函数绑定时，就会很容易发现。

巴特西

jQuery ID与Class性能对比之一

最新文章

热门文章