javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率

来源：互联网发布：网络流行年轻群体文化编辑：程序博客网时间：2024/05/01 07:29

刚来到这里，趁着还没有忘记，来记录一下，昨晚学习的一个知识点——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 文档碎片到页面就可以了。这样就不用多次刷新页面达到性能优化的目的。上面那个代码我觉得用到文档碎片是多余的。（再次证明只是理论上的提高性能）

这些就是我学习到的内容，以后有学习到更多关于这方面的，到时再更新。

0 0