不管是在网上，还是在翻看书籍的时候，都能看到在使用for循环操作DOM节点时要做数节点长度的缓存，以确保性能最优化！
这二种写法格式大致是下面这样的
/*节点集合*/
var domarr=document.getElementsByTagName("div");
/*第一种写法 未缓存数组长度*/
for(var i=0;i<domarr.length;i++){
//do something
}
/*第二种写法 缓存数组长度*/
var len=domarr.length
for(var j=0;j<len;j++){
//do something
}
我平时写JS的时候也都是缓存长度的写法。虽然一直都这样用，但是确实也不知是不是真的对性能有优化，趁今天周未，正好写个小段子来看看是不是那么回事！
场景是这样：
首先在页面上生成5000个div，并插入到body中
再用FOR循环（未缓存节点长度，缓存节点长度）动态修改每个节点的属性，样式，弹出二种方式修改所花费的时间来判断谁的性能好。
代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>缓存数组的长度</title>
<style>
p{font-size:40px;}
</style>
</head>
<body>
<a href="javascript:void(0);">触发未缓存的操作</a>
<a href="javascript:void(0);">触发已缓存的操作</a>
<script>
window.onload=function(){
//随机生成若干个div，并设置初始样式
for(var i=0;i<5000;i++){
var creat=document.createElement("div");
document.body.appendChild(creat);
changefn(creat,i,{
widthz:"100px",
heightz:"14px",
colorz:"green",
mtz:"1px"
})
}
//获取生成的div
var divarra=document.getElementsByTagName("div"),
len=divarra.length-1,
btn=document.getElementsByTagName("a");
btn[0].onclick=function(){
testtime(divarra);
}
btn[1].onclick=function(){
testtime0(divarra);
}
//主函数功能，根据bz标致变量的值来走缓存数组长度也没有缓存数据长度
function testtime(divarr){
var oldtime=new Date().getTime(),
nexttime=0;
for(var i=0;i<divarr.length;i++){
changefn(divarr[i],"没缓存",{
widthz:"110px",
heightz:"16px",
colorz:"red",
mtz:"2px"
})
if(i===len){
nexttime=new Date().getTime();
console.log(oldtime,nexttime,nexttime-oldtime,"未缓存")
}
}
}
function testtime0(divarr){
var oldtime=new Date().getTime(),
nexttime=0;
for(var j=0;j<=len;j++){
changefn(divarr[j],"已绑存",{
widthz:"120px",
heightz:"18px",
colorz:"blue",
mtz:"3px"
})
if(j===len){
nexttime=new Date().getTime();
console.log(oldtime,nexttime,nexttime-oldtime,"有缓存")
}
}
}
//动态改变属性
function changefn(obj,index,josnz){
obj.innerHTML=index;
obj.style.width=josnz.widthz;
obj.style.height=josnz.heightz;
obj.style.background=josnz.colorz;
obj.style.marginTop=josnz.mtz;
}
}
</script>
</body>
</html>
感觉在chrome下性能表现有缓存节点长度的明显要高于未缓存的，但是在我最信任的火狐跟最恶心的ie下老是跳动无法捉摸，而且感觉随着节点数越多，未缓存的性能经常高于已缓存，表示无解。
图示如下:
个人感觉还是以缓存节点长度再操作为好的写法，至少在chrome下是有性能优势的，虽然在火狐跟ie下比较怪异，但也不会带来大的性能问题，至少也是一种好习惯,也是很多人推荐的写法。
以上纯属个人观点，有错望指正！
时间： 2024-10-29 06:25:03