什么是DOM?

•  用于操作XML和HTML文档的应用程序

1. Dom节点  2. Dom树   3.Dom API  

DOM优化

• 浏览器会把js和dom独立实现，js每次操作dom，都会增加一次耗时，为了提高dom性能，就要尽可能减少js对dom的操作，

        以下是两个测试

1   19 20 21 
     
22 

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

• 减少DOM操作的方法：

1. 使用节点克隆 node.cloneNode()代替创建新的重复节点
2. 使用局部变量代替访问节点集合，例如
   var doc=document;   var div=doc.getElementById('div');   var input=doc.getElementById('input');
3. 尽量用只获取元素节点的获取方式,例如 使用children代替childNodes    firstElementChild代替firstChild
4. 选择器API: 使用querySelectorAll(除IE8以下的浏览器都得到良好支持)

DOM与浏览器

• 重排：改变页面内容的过程
• 重绘：重排结束之后，浏览器显示内容的过程

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

1. 尽量在appendChild（）前面进行操作
   1 for(var i=0;i<50000;i++){ 2     var li=document.createElement('li'); 3     //不推荐 4     ul.appendChild(li); 5     li.innerHTML='li'; 6  }            7 for(i=0;i<5000;i++){ 8      var li=document.createElement('li'); 9      //推荐10      li.innerHTML='li';11      ul.appendChild(li);12}
2. 使用cssText合并dom操作
3. 缓存布局信息. 例如：
   1 window.onload = function(){ 2     var oDiv = document.getElementById('div1'); 3     var L = oDiv.offsetLeft; 4     var T = oDiv.offsetTop; 5     setInterval(function(){ 6         L++; 7         T++; 8         oDiv.style.left = L + 'px'; 9         oDiv.style.top = T + 'px';10     },30);11 };
4. 利用文档碎片
   1 window.onload = function(){2     var oUl = document.getElementById('ul1');3     var oFrag = document.createDocumentFragment();4     for(var i=0;i<5000;i++){5         var oLi = document.createElement('li');6         oFrag.appendChild(oLi);7     }8     oUl.appendChild(oFrag);9 }; 

 DOM与事件

• 通过事件代理（事件委托）来提升浏览器性能
  1  console.time('test1'); 2       for(i=0;i

DOM与前端模板

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