DOM优化

DOM优化

DOM与浏览器

重排	改变页面的内容
重绘	浏览器显示内容
添加顺序	尽量在appendChild之前添加操作
合并dom操作	利用cssText
缓存布局信息
文档碎片

缓存布局优化

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

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.left=T+'px';
    },30);
};

文档碎片

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

DOM与事件

事件委托

DOM与前端模板

能更好的对逻辑和视图分离，MVC架构的基础