您的位置：首页 > Web前端 > JQuery

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

2017-07-05 18:23 411 查看

总结：无论创建几次，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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航