createDocumentFragment
频繁一次性追加新节点到页面中，可以先创建一个DocumentFragment对象，然后将要追加的DOM对象都append到此对象中，最后添加到DOM结构中。此种方法效率比一个个节点追加到DOM结构中效率来的高。以下是个测试示例
1 <html>
2 <head>
3
4 <script type="text/javascript">
5 function oraAdd(){
6 var d = new Date();
8 for (var i = 0; i < 10000; i++) {
9 var para = document.createElement("p");
10 para.appendChild(document.createTextNode("Paragraph " + i));
11 document.body.appendChild(para)
12 }
13 console.log(new Date()-d);
14
15 }
16 function fragmentAdd(){
17 var d = new Date();
18 var fragment = document.createDocumentFragment(); //创建createDocumentFragment对象
20 for (var i = 0; i < 10000; i++) {
21 var para = document.createElement("p");
22 para.appendChild(document.createTextNode("Paragraph " + i));
2 <head>
3
4 <script type="text/javascript">
5 function oraAdd(){
6 var d = new Date();
8 for (var i = 0; i < 10000; i++) {
9 var para = document.createElement("p");
10 para.appendChild(document.createTextNode("Paragraph " + i));
11 document.body.appendChild(para)
12 }
13 console.log(new Date()-d);
14
15 }
16 function fragmentAdd(){
17 var d = new Date();
18 var fragment = document.createDocumentFragment(); //创建createDocumentFragment对象
20 for (var i = 0; i < 10000; i++) {
21 var para = document.createElement("p");
22 para.appendChild(document.createTextNode("Paragraph " + i));
23 fragment.appendChild(para);
24 }
25
26 document.body.appendChild(fragment);
27 console.log(new Date()-d);
28 }
29
30 </script>
31
32 </head>
33 <body>
34
35 <input type="button" value="增加1" onclick="oraAdd()"></input>
36 <input type="button" value="增加2" onclick="fragmentAdd()"></input>
37 </body>
38 </html>
浙公网安备 33010602011771号