您的位置：首页 > Web前端 > JavaScript
js-div的修改优化思路对比

2017-07-07 17:05 399 查看
总结：在耗时上，a思路是b思路的100倍以上！所以，b更值得推荐！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>js创建dom与jq创建的dom的性能测试</title>
<style type="text/css">
html,body,ul,li{margin:0;padding:0px;font-size:12px;}
h1{text-align:center;text-decoration: underline;}
p{text-align:center;}
.wrap{width:48%;height:550px;overflow:auto;border:1px solid pink;}
.wrap span{display:inline-block;}
.fl{float:left;margin-left:1%;}
.fr{float:right;margin-right:1%;}
.wrap div{height:25px;}
.wrap div.tr{width:750px;height:25px;line-height:25px;text-align:center;margin:5px 2px;border-bottom:1px solid red;}
.tr div{float:left;margin:0px 2px;}
</style>
</head>
<body>
<h1>div的修改优化思路对比</h1>
<p>
<input type="button" value="a思路：先删除原来，再重新创建" onClick="Fn1()"/>
<input type="button" value="b思路：在原来基础上更新行" onClick="Fn2()"/>
</p>
<div class="wrap fl">
<div id="wrap1"></div>
</div>
<div class="wrap fr">
<div id="wrap2"></div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

var wrap1 = document.getElementById('wrap1');
var wrap2 = document.getElementById('wrap2');
var modifyNum1 = 0;
var modifyNum2 = 0;
var theadArr = [{val:'',width:32},{val:'车牌号',width:70},{val:'车辆自编号',width:80},{val:'通讯号码',width:80},{val:'终端类型',width:80},{val:'自定义分组',width:80},{val:'终端ID',width:70},{val:'SIM卡号',width:60},{val:'车牌颜色',width:80},{val:'状态',width:60}];
var count = 100;

// 先删除原来，再重新创建
function Fn1(){
modifyNum1++;
wrap1.innerHTML='';
loadDom(wrap1,modifyNum1,true);
}
// 在原来基础上更新行
function Fn2(){
modifyNum2++;
modifyOnBase(modifyNum2);
}

/* 计算程序执行所耗时间  key:标记*/
var dataTime = {row:[]};
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;
},
getTime:function(key){
calculation(Timer.data[key],key);//计算总耗时+平均耗时

return Timer.data[key];
}
};

//计算总耗时+平均耗时
function calculation(s,key){
if(!dataTime[key]){
dataTime[key]={row:[]};
}
dataTime[key].row.push(s);
var dataTimelen = dataTime[key].row.length;
var nums = 0;
for(var i=0;i<dataTimelen;i++){
nums += dataTime[key].row[i];
}
var avg = nums/dataTimelen;
console.info(' ');
console.info(dataTime[key].row.toString())
console.info(
4000
'共'+dataTimelen+'次，平均耗时：'+avg);
}

loadDom(wrap1,modifyNum1,false,'tr1');
loadDom(wrap2,modifyNum2,false,'tr2');
// b 思路的修改
function modifyOnBase(modifyNum2){
console.log('modifyNum2:'+modifyNum2+' '+typeof modifyNum2);
Timer.start('b');
for(var i=0;i<count;i++){
var  tr = document.getElementById('tr2'+i);
var perDiv = tr.getElementsByTagName('div');
for(var a = 0,l=perDiv.length;a<l;a++){
if(a!=0){
var text = perDiv[a].childNodes[0].nodeValue;
var txtArr = text.split('-');
perDiv[a].childNodes[0].nodeValue = txtArr[0]+'-'+modifyNum2;
}
}
}

Timer.stop('b');
console.info("b the time is:"+Timer.getTime('b'));
}
// a和b 的创建 + a的修改
function loadDom(dom,num,isModify,id){
if(isModify){
Timer.start('a');
}
var wrapSpan = document.createElement('span');
var wrapW = 0;
for(var i=0;i<count;i++){ //行
// console.log(i);
var tr = document.createElement('div');

for(var j=0,n=theadArr.length;j<n;j++){
var spaceDiv = document.createElement('div'),
registrationNo = document.createElement('div'),
carName = document.createElement('div'),
communicationNo = document.createElement('div'),
deviceTypeID = document.createElement('div'),
lineName = document.createElement('div'),
driverID = document.createElement('div'),
deviceSIM = document.createElement('div'),
registrationNoColor = document.createElement('div'),
carStatus = document.createElement('div');

spaceDiv.style.width = theadArr[0].width+'px';
registrationNo.style.width = theadArr[1].width+'px';
carName.style.width = theadArr[2].width+'px';
communicationNo.style.width = theadArr[3].width+'px';
deviceTypeID.style.width = theadArr[4].width+'px';
lineName.style.width = theadArr[5].width+'px';
driverID.style.width = theadArr[6].width+'px';
deviceSIM.style.width = theadArr[7].width+'px';
registrationNoColor.style.width = theadArr[8].width+'px';
carStatus.style.width = theadArr[9].width+'px';

var spaceDivVal = document.createTextNode(i),
registrationNoVal = document.createTextNode(theadArr[1].val+'-'+num),
carNameVal = document.createTextNode(theadArr[2].val+'-'+num),
communicationNoVal = document.createTextNode(theadArr[3].val+'-'+num),
deviceTypeIDVal = document.createTextNode(theadArr[4].val+'-'+num),
lineNameVal = document.createTextNode(theadArr[5].val+'-'+num),
driverIDVal = document.createTextNode(theadArr[6].val+'-'+num),
deviceSIMVal = document.createTextNode(theadArr[7].val+'-'+num),
registrationNoColorVal = document.createTextNode(theadArr[8].val+'-'+num),
carStatusVal = document.createTextNode(theadArr[9].val+'-'+num);

spaceDiv.appendChild(spaceDivVal),
registrationNo.appendChild(registrationNoVal),
carName.appendChild(carNameVal),
communicationNo.appendChild(communicationNoVal),
deviceTypeID.appendChild(deviceTypeIDVal),
lineName.appendChild(lineNameVal),
driverID.appendChild(driverIDVal),
deviceSIM.appendChild(deviceSIMVal),
registrationNoColor.appendChild(registrationNoColorVal),
carStatus.appendChild(carStatusVal);

}

tr.setAttribute('class','tr');
tr.setAttribute('index',i);
tr.setAttribute('id',id+i);
tr.appendChild(spaceDiv);
tr.appendChild(registrationNo);
tr.appendChild(carName);
tr.appendChild(communicationNo);
tr.appendChild(deviceTypeID);
tr.appendChild(lineName);
tr.appendChild(driverID);
tr.appendChild(deviceSIM);
tr.appendChild(registrationNoColor);
tr.appendChild(carStatus);
wrapSpan.appendChild(tr);

}

dom.appendChild(wrapSpan);

if(isModify){
Timer.stop('a');
console.log("a the time is:"+Timer.getTime('a'));
}

}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： 性能优化
相关文章推荐
新的分享
章节导航