前端开发

javascript操作DOM之性能优化最新评论添加评论

可以明显看出，test2只操作了一次dom，性能提高了很多

减少DOM操作的方法：

使用节点克隆 node.cloneNode()代替创建新的重复节点

使用局部变量代替访问节点集合，例如

var doc=document;

   var div=doc.getElementById('div');

   var input=doc.getElementById('input');

尽量用只获取元素节点的获取方式,例如 使用children代替childNodes    firstElementChild代替firstChild

选择器API: 使用querySelectorAll(除IE8以下的浏览器都得到良好支持)

DOM与浏览器

重排：改变页面内容的过程

重绘：重排结束之后，浏览器显示内容的过程

       可以通过以下的方式减少重排和重绘的过程，从而提升浏览器性能

尽量在appendChild（）前面进行操作

for(var i=0;i<50000;i++){
    var li=document.createElement('li');
    //不推荐
    ul.appendChild(li);
    li.innerHTML='li';
 }
for(i=0;i<5000;i++){
     var li=document.createElement('li');
     //推荐
     li.innerHTML='li';
     ul.appendChild(li);
}

使用cssText合并dom操作

缓存布局信息. 例如：

window.onload = function(){
    var oDiv = document.getElementById('div1');
    var L = oDiv.offsetLeft;
    var T = oDiv.offsetTop;
    setInterval(function(){
        L++;
        T++;
        oDiv.style.left = L + 'px';
        oDiv.style.top = T + 'px';
    },30);
};

利用文档碎片

window.onload = function(){
    var oUl = document.getElementById('ul1');
    var oFrag = document.createDocumentFragment();
    for(var i=0;i<5000;i++){
        var oLi = document.createElement('li');
        oFrag.appendChild(oLi);
    }
    oUl.appendChild(oFrag);
};

 DOM与事件

通过事件代理（事件委托）来提升浏览器性能

console.time('test1');
      for(i=0;i


//下面是事件代理绑定事件
console.time('test2');
       oUl.onclick=function(e){
             e=e || event;
             var t=e.target || e.srcElement;
             if(t.nodeName.toLowerCase()=='li'){
                 t.onclick=function(){
                     alert(1);
                };
            }
        };
 console.timeEnd('test2');//火狐下测试 1.54ms


DOM与前端模板


更好的对逻辑和视图进行分离，MVC框架的基础


                

                

                    

                        

                            
收藏(16)
                            
赞(1)
                            
举报
                        
                    
                
                    分享到：