DocumentFragment() 创建碎片，减少reflow回流

js中的DocumentFragment() 纯增加性能的方法   |

document.createDocumentFragment()

说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现，并重新刷新整个页面，从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。

 

var oui=document.getElementById("oItem"); 
for(var i=0;i<10;i++) 
{ 
var oli=document.createElement("li"); 
oui.appendChild(oli); 
oli.appendChild(document.createTextNode("Item"+i)); 
} 

上面的代码在循环中调用了oui.appendChild（oli），每次执行这条语句后，浏览器都会更新页面。其次下面的oui.appendChild()添加了文本节点，也要更新页面。所以一共要更新页面20次。 
为了页面的优化，我们要尽量减少DOM的操作，将列表项目在添加文本节点之后再添加，并合理地使用creatDocumentFragment(),代码如下：

var oui=document.getElementById("oItem"); 
var oFragment=document.createDocumentFragment(); 
for(var i=0;i<10;i++){ 
var oli=document.createElement("li"); 
oli.appendChild(document.createTextNode("Item"+i)); 
oFragment.appendChild(oli); 
} 
oui.appendChild(oFragment);