JS中文档碎片
不管是js还是很常见的jquery，我们一般操作DOM就会引起页面数据的渲染，在比较大的项目或者说的更直接点，是面试别人问起来的时候知道。细节也很重要。
createDocumentFragment() 的作用主要是以前你用小刀一刀一刀的割，但是文档碎片使用的是长40米的大刀，一刀就解决。何乐不为呢。测试碎片在大动干戈的情况下确实稍微效率高点。
通常操作DOM的情况：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul id="ul1"></ul> 9 </body> 10 11 <script type="text/javascript"> 12 window.onload=function(){ 13 var oUl = document.getElementById("ul1"); 14 for(var i=0;i<10;i++){ 15 var oLi = document.createElement("li"); 16 oLi.innerHTML = "哈哈哈哈哈"; 17 18 //oUl.appendChild(oLi); 19 } 20 } 21 </script> 22 </html>
但是使用文档碎片以后就是这个样子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul id="ul1"></ul> 9 </body> 10 11 <script type="text/javascript"> 12 window.onload=function(){ 13 var oUl = document.getElementById("ul1"); 14 // 创建文件碎片 15 var oFrag = document.createDocumentFragment(); 16 17 for(var i=0;i<10;i++){ 18 var oLi = document.createElement("li"); 19 oLi.innerHTML = "1++1"; 20 21 //将 li 添加到文件碎片中 22 oFrag.appendChild(oLi); 23 } 24 //最后一次性添加到document中 25 oUl.appendChild(oFrag); 26 27 } 28 </script> 29 </html>