jquery性能测试

//选择器

//对下面代码进行input选择,分别循环取值10000次，测试浏览器firefox

$(:input[name=i])　　//执行时间 = 5353 毫秒

$(input[name=i])　　//执行时间 = 661 毫秒

$('#i')　　　　　　　//执行时间 = 213 毫秒

document.getElementById("i");　 //执行时间 = 9 毫秒(原生js威武)

$('input')　　　　　　　　　　　　//执行时间 = 575 毫秒

document.getElementsByTagName("input"); //执行时间 = 9 毫秒(原生js威武)

$('.class')   //执行时间 = 563 毫秒　　

document.getElementsByTagName("input"); //执行时间 = 5 毫秒 //IE下有不兼容

<html>
<head>

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){

    var a = [];
    var t1 = new Date();
    for(var j=0;j<10000;j++){    
       var b = document.getElementById("i");
     //var b=$('#i')
         a.push(b);
    }
    var t2 = new Date();
    alert("执行时间 = "+ (t2-t1) + " 毫秒");      
   // alert(b.innerHTML);


})
</script>

</head>
<body>
    <input name="i" id="i">2</li>
</body>
</html>

 //点击切换取值

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>



</head>
<body>
 <h3 class="on active_tab_all"  id="1">全部活动</h3>
            <h3 class="active_tab_all"  id="2" >报名中</h3>
            <h3 class="active_tab_all" id="3" >已结束</h3>
<h3 class="active_tab_all"  id="4" >已结束</h3>
<h3 class="active_tab_all"  id="5" >已结束</h3>
<h3 class="active_tab_all"  id="6" >已结束</h3>
<script type="text/javascript" >

$(function(){



    
       
       var t1 = new Date();
       
    
    //alert(a);
    var t1=new Date();

    for($i=0;$i<10000;$i++){
    
    //js取tag名字 4毫秒
    /*
        if(document.getElementById('active_tab1')){
        $active=[];
        $active=document.getElementsByTagName('h3')
        for($i=0;$i<$active.length;$i++){

            $active[$i].onclick=function(){
                alert(this.id);
            }


        }
    }
    */
        
    //jquery取值 3783毫秒
    
    $('h3').click(function(){

    })
    
    
/*    //243毫秒
    
    document.getElementById("1").onclick=function(){}
    document.getElementById("2").onclick=function(){}
    document.getElementById("3").onclick=function(){}
    document.getElementById("4").onclick=function(){}
    document.getElementById("5").onclick=function(){}
    document.getElementById("6").onclick=function(){}
*/
    }
    var t2=new Date();
    alert(t2-t1);

    //alert(document.getElementById("i"));
    //var a2=a("i");
    //alert(a2);
})    

</script>

</body>
</html>

 

posted @ 2013-05-15 11:29  忆殇之痕  阅读(157)  评论(0)  编辑  收藏  举报