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

刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片

一、对文档碎片的基本认识

  • 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的
  • 文档碎片原理

        减少对DOM 修改带来的的回流操作。

下面我说一下什么是DOM的回流操作

 

举个粗俗简单的例子:

比如一个人去商场买醋、白酒、盐。

他有两种做法:

(1)一次性去商场把这三样东西都买回家,这样来回也就是2趟;

(2)可以是买一样东西就拿回家,然后又回去买第二样东西,接着又回去买第三样东西,显示这样来回是要6趟。

显然后者是神经病。

这个例子想表达的这就是回流操作,来来去去。

现在我结合一下DOM的新增节点,使用文档碎片的方法怎么减少DOM回流操作,来提高性能。

例如:一次性定义10000个li节点,然后把它们放在文档碎片上,最后一次性挂载上去。

另一种方法,我们没新增一个li节点就把它挂载上去,显然这样要操作DOM的次数很多,引发的DOM操作回流次数多,从理论上降低了执行性能。(只是理论上,因为我后来做的例子,跟我预期的结果不一致。)

如何创建一个文档碎片

var oFrag = document.createDocumentFragment();              //是用来创建文档碎片的。

下面我把我实验的代码+执行截图贴出来:

我的测试方法:新增10000个li节点,统计执行的时间,通过对比两者的的执行时间来判断谁的性能更高一点。

(1)使用普通方法挂载新增节点

javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
 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>
javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率

执行结果:

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

(2)使用文档碎片:

javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
 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>
javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率

执行截图:

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

大概总结:

当我们需要大量 appendChild 页面元素时,可以先将这些元素 appendChild 进 document.createDocumentFragment。

然后只需 appendChild 文档碎片到页面就可以了。这样就不用多次刷新页面达到性能优化的目的。上面那个代码我觉得用到文档碎片是多余的。(再次证明只是理论上的提高性能)

 

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

javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率,布布扣,bubuko.com

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

上一篇:Java 编译错误:缺少返回语句


下一篇:C语言-线性表基本操作之单链表