js创建dom与jq创建的dom的性能测试-(记得引入jquery)

来源：互联网发布：数组怎么用编辑：程序博客网时间：2024/06/16 02:03
总结：无论创建几次，js性能总比jq好！，
<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>js创建dom与jq创建的dom的性能测试</title>        <style type="text/css">            .wrap{width:49%;height:300px;overflow:auto;border:1px solid pink;}            .fl{float:left;}            .fr{float:right;}            .wrap div{float:left;width:50px;height:50px;margin:5px;border:1px solid red;}        </style>    </head>    <body>        <p>            <input type="button" value="js创建10000个div耗时" onClick="jsFn()"/>            <input type="button" value="jq创建10000个div耗时" onClick="jqFn()"/>        </p>        <div id="wrap1"class="wrap fl"></div>        <div id="wrap2"class="wrap fr"></div>        <script type="text/javascript" src="js/jquery.min.js"></script>        <script type="text/javascript">            var count = 10000;            // js创建            function jsFn(){                Timer.start("js");                                var wrap = document.getElementById('wrap1');                var span = document.createElement('span');                for(var i=0;i<count;i++){                    var div = document.createElement('div');                    var cont = document.createTextNode(i+'-');                    var span1 = document.createElement('span'),                    span2 = document.createElement('span'),                    span3 = document.createElement('span'),                    span4 = document.createElement('span'),                    span5 = document.createElement('span');                    var span1Val = document.createTextNode(1),                    span2Val = document.createTextNode(2),                    span3Val = document.createTextNode(3),                    span4Val = document.createTextNode(4),                    span5Val = document.createTextNode(5);                    span1.appendChild(span1Val);                    span2.appendChild(span2Val);                    span3.appendChild(span3Val);                    span4.appendChild(span4Val);                    span5.appendChild(span5Val);                    div.appendChild(cont);                    div.appendChild(span1);                    div.appendChild(span2);                    div.appendChild(span3);                    div.appendChild(span4);                    div.appendChild(span5);                    span.appendChild(div);                }                wrap.appendChild(span);                Timer.stop("js");                console.log("js：the time is:"+Timer.getTime("js"));            }            // jq创建            function jqFn(){                Timer.start("jq");                var div = '';                for(var i=0;i<count;i++){                    div+='<div>'+i+                            '-<span>1</span>'+                            '<span>2</span>'+                            '<span>3</span>'+                            '<span>4</span>'+                            '<span>5</span>'+                        '</div>';                }                $('#wrap2').append(div);                 Timer.stop("jq");                console.log("jq：the time is:"+Timer.getTime("jq"));            }            /* 计算程序执行所耗时间  key:标记*/            var dataTime = [];            var Timer={              data:{},              start:function(key){                Timer.data[key]=new Date();              },              stop:function(key){                var time=Timer.data[key];                if(time)                Timer.data[key]=new Date()-time;                // console.log(Timer.data[key])              },              getTime:function(key){                calculation(Timer.data[key]);//计算总耗时+平均耗时                return Timer.data[key];              }            };            //计算总耗时+平均耗时            function calculation(s){                dataTime.push(s);                var dataTimelen = dataTime.length;                var nums = 0;                for(var i=0;i<dataTimelen;i++){                    nums += dataTime[i];                }                var avg = nums/dataTimelen;                console.info(' ');                console.log(dataTime.toString())                console.info('共'+dataTimelen+'次，平均耗时：'+avg);            }                    </script>    </body></html>
阅读全文
0 0