脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 刚来到这里，趁着还没有忘记，来记录一下，昨晚学习的一个知识点——JavaScript中的文档碎片。
一、对文档碎片的基本认识
文档碎片原理
减少对DOM 修改带来的的回流操作。
下面我说一下什么是DOM的回流操作
举个粗俗简单的例子：
比如一个人去商场买醋、白酒、盐。
他有两种做法：
(1)一次性去商场把这三样东西都买回家，这样来回也就是2趟；
(2)可以是买一样东西就拿回家，然后又回去买第二样东西，接着又回去买第三样东西，显示这样来回是要6趟。
显然后者是神经病。
这个例子想表达的这就是回流操作，来来去去。
现在我结合一下DOM的新增节点，使用文档碎片的方法怎么减少DOM回流操作，来提高性能。
例如：一次性定义10000个li节点，然后把它们放在文档碎片上，最后一次性挂载上去。
另一种方法，我们没新增一个li节点就把它挂载上去，显然这样要操作DOM的次数很多，引发的DOM操作回流次数多，从理论上降低了执行性能。（只是理论上，因为我后来做的例子，跟我预期的结果不一致。）
如何创建一个文档碎片
VAR oFrag = document.createDocumentFragment(); //是用来创建文档碎片的。
下面我把我实验的代码+执行截图贴出来：
我的测试方法：新增10000个li节点，统计执行的时间，通过对比两者的的执行时间来判断谁的性能更高一点。
（1）使用普通方法挂载新增节点
复制代码
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>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率全部内容，希望文章能够帮你解决javascript代码实例教程-javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。