js-div的修改优化思路对比

来源：互联网发布：百度云加速软件编辑：程序博客网时间：2024/05/18 00:49
总结：在耗时上，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('共'+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>
阅读全文
0 0