04-JS中文档碎片

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>