文档碎片对象的角度看 减少对 dom 的操作

文档碎片对象的角度看 减少对 dom 的操作

1. 减少dom操作
   通常我们总是在使用各种 前端框架时， 会说减少dom操作；尽可能多的使用前端框架所带的方法去操作元素，

2. 为什么要减少dom操作？
   我们平时每次对dom的操作都会触发"重排"（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少 dom操作来减少"重排"，

3. 怎样减少dom操作？
   文档碎片 可以帮我们；

4. ** 什么是文档碎片？**
   文档碎片： document.createDocumentFragment() 一个容器，用于暂时存放创建的dom元素

5. 文档碎片使用举例
   比如需要往页面上放100个元素：

普通方式：（操作了100次dom）   
for(var i=100; i>0; i--){ 
	    var elem = document.createElement('div');
	    document.body.appendChild(elem);//放到body中
	}

文档碎片
 var df = document.createDocumentFragment();          
 for(var i=100; i>0; i--){              
      var elem = document.createElement('div');                             
      df.appendChild(elem);
 }    
 document.body.appendChild(df);

第一种方式显然操作dom 的次数远大于第二次； 那么我们现在大概对减少dom操作的方法有了一些认识

6. 总结
   总结：减少dom操作；尽可能多的使用前端框架所带的方法去操作元素; 如果必要时我们可以使用文档碎片来帮助我们操作dom