for循环操作DOM缓存节点长度？

时间：2015-08-01 15:39:40 阅读：148 评论：0 收藏：0 [点我收藏+]

标签：

不管是在网上，还是在翻看书籍的时候，都能看到在使用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>

View Code

感觉在chrome下性能表现有缓存节点长度的明显要高于未缓存的，但是在我最信任的火狐跟最恶心的ie下老是跳动无法捉摸，而且感觉随着节点数越多，未缓存的性能经常高于已缓存，表示无解。

图示如下:

技术分享

在线测试地址

个人感觉还是以缓存节点长度再操作为好的写法，至少在chrome下是有性能优势的，虽然在火狐跟ie下比较怪异，但也不会带来大的性能问题，至少也是一种好习惯,也是很多人推荐的写法。