最近一直在做网站的优化方面的工作,在实际优化的过程中逐渐发现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函数绑定时,就会很容易发现。