javascript之文档碎片，文档碎片在理论上可以拔高DOM操作的执行效率
日期：2014-05-16 浏览次数：20389 次
javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里，趁着还没有忘记，来记录一下，昨晚学习的一个知识点——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 </ht
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
