刚来到这里，趁着还没有忘记，来记录一下，昨晚学习的一个知识点——JavaScript中的文档碎片。
一、对文档碎片的基本认识
- 文档碎片可以提高DOM操作性能（理论上，注意！！理论上的）
- 文档碎片原理
减少对DOM 修改带来的的回流操作。
下面我说一下什么是DOM的回流操作
举个粗俗简单的例子：
比如一个人去商场买醋、白酒、盐。
他有两种做法：
(1)一次性去商场把这三样东西都买回家，这样来回也就是2趟；
(2)可以是买一样东西就拿回家，然后又回去买第二样东西，接着又回去买第三样东西，显示这样来回是要6趟。
显然后者是神经病。
这个例子想表达的这就是回流操作，来来去去。
现在我结合一下DOM的新增节点，使用文档碎片的方法怎么减少DOM回流操作，来提高性能。
例如：一次性定义10000个li节点，然后把它们放在文档碎片上，最后一次性挂载上去。
另一种方法，我们没新增一个li节点就把它挂载上去，显然这样要操作DOM的次数很多，引发的DOM操作回流次数多，从理论上降低了执行性能。（只是理论上，因为我后来做的例子，跟我预期的结果不一致。）
如何创建一个文档碎片
var oFrag = document.createDocumentFragment(); //是用来创建文档碎片的。
下面我把我实验的代码+执行截图贴出来：
我的测试方法：新增10000个li节点，统计执行的时间，通过对比两者的的执行时间来判断谁的性能更高一点。
（1）使用普通方法挂载新增节点
1<!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>文档碎片性能测试——普通方法</title>
6 <script>
7 window.onload = function(){
8 var oBtn = document.getElementById("btn1");
9 var oUl = document.getElementById("ul1");
10
11 var iStart = new Date().getTime(); //开始执行的时间
12 oBtn.onclick = function(){
13 //普通追加
14
15 for(var i=0; i<100000; i++){ //使用for循环创建100000个li节点，并一个个的挂载在ul下面
16 var oLi = document.createElement("li");
17 oUl.appendChild(oLi);
18 }alert(new Date().getTime() - iStart); //打印出最后这个程序耗费的而时间
19 }
20
21 }
22 </script>
23 </head>
24 <body>
25 <input id="btn1" type="button" value="普通" />
26 <ul id="ul1">
27 <li>li</li>
28 </ul>
29 </body>
30 </html>
执行结果：
（2）使用文档碎片：
1 <!--创建文档碎片--> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="utf-8" /> 6 <title>文档碎片性能测试</title> 7 <script> 8 window.onload = function(){ 9 var oBtn = document.getElementById("btn1"); 10 var oUl = document.getElementById("ul1"); 11 12 13 var iStart = new Date().getTime(); 14 oBtn.onclick = function(){ 15 //文档碎片方式 16 var oFrag = document.createDocumentFragment();//建立一个文档对象，作为新增节点的临时容器，最后将这个容器连的内容直接挂载在父节点ul下面。 17 18 for(var i=0; i<100000; i++){ 19 var oLi = document.createElement("li"); 20 oFrag.appendChild(oLi); 21 } 22 oUl.appendChild(oFrag); 23 alert(new Date().getTime() - iStart); 24 } 25 26 } 27 </script> 28 </head> 29 <body> 30 <input id="btn1" type="button" value="碎片" /> 31 <ul id="ul1"> 32 <li>li</li> 33 </ul> 34 </body> 35 </html>
执行截图：
大概总结：
当我们需要大量 appendChild 页面元素时，可以先将这些元素 appendChild 进 document.createDocumentFragment。
然后只需 appendChild 文档碎片到页面就可以了。这样就不用多次刷新页面达到性能优化的目的。上面那个代码我觉得用到文档碎片是多余的。（再次证明只是理论上的提高性能）
这些就是我学习到的内容，以后有学习到更多关于这方面的，到时再更新。