刚来到这里，趁着还没有忘记，来记录一下，昨晚学习的一个知识点——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）使用文档碎片：

 <!--创建文档碎片-->

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>文档碎片性能测试</title>

         <script>

             window.onload = function(){

             var oBtn = document.getElementById("btn1");

             var oUl = document.getElementById("ul1");

             var iStart = new Date().getTime();

             oBtn.onclick = function(){

                 //文档碎片方式

                 var oFrag = document.createDocumentFragment();//建立一个文档对象，作为新增节点的临时容器，最后将这个容器连的内容直接挂载在父节点ul下面。

                 for(var i=0; i<100000; i++){

                     var oLi = document.createElement("li");

                     oFrag.appendChild(oLi);

                 }

                 oUl.appendChild(oFrag);

                 alert(new Date().getTime() - iStart);

             }

         }

         </script>

     </head>

     <body>

         <input id="btn1" type="button" value="碎片" />

         <ul id="ul1">

             <li>li</li>

         </ul>

     </body>

 </html>

执行截图：

大概总结：

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

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

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

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

  1. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  2. Javascript学习8 - 脚本化文档(Document对象)

    原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...

  3. JavaScript权威指南--脚本化文档

    知识要点 脚本化web页面内容是javascript的核心目标. 第13章和14章解释了每一个web浏览器窗口.标签也和框架由一个window对象所示.每个window对象有一个document对象, ...

  4. Javascript绝不要使用在文档加载之后使用 document.write()， 怎么理解？

    在文档加载之后使用 document.write(),会覆盖该文档.   需满足两个条件:      1.在函数内部调用document.write():      2.通过按钮响应调用函数:   举 ...

  5. 关于HTML文档的文档模式

    HTML文档的文档模式包括混杂模式和标准模式,这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行. 如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开 ...

  6. 返回当前文档的文档的url

    HTML DOM referrer 属性 HTML DOM Document 对象 定义和用法 referrer 属性可返回载入当前文档的文档的 URL. 语法 document.referrer 说 ...

  7. 把 MWeb Lite 的文档库文档和数据搬到 MWeb 正式版中

    MWeb Lite 版的文档库中的文档要搬到 MWeb 正式版中,如果 Lite 版的文档中没有图片或者只有少量图片,可以用导入导出为 Markdown 的方法. 否则的话请用以下方式(注意下面这个方 ...

  8. 使用C#动态生成Word文档/Excel文档的程序测试通过后，部署到IIS服务器上，不能正常使用的问题解决方案

    使用C#动态生成Word文档/Excel文档的程序功能调试.测试通过后,部署到服务器上,不能正常使用的问题解决方案: 原因: 可能asp.net程序或iis访问excel组件时权限不够(Ps:Syst ...

  9. 创建MFC应用程序的类型：单文档+多文档+基于对话框

    单文档支持文档视图架构.数据的保存--(读取--改动)文档类功能--显示(视图类功能),比較方便. 基于对话框,主窗体是对话框类型.能够方便的使用控件,所见即所得的编程,比較方便. 单文档类似&quo ...

随机推荐

  1. [Machine Learning] 梯度下降（BGD）、随机梯度下降（SGD）、Mini-batch Gradient Descent、带Mini-batch的SGD

    一.回归函数及目标函数 以均方误差作为目标函数(损失函数),目的是使其值最小化,用于优化上式. 二.优化方式(Gradient Descent) 1.最速梯度下降法 也叫批量梯度下降法Batch Gr ...

  2. 亲手用模块化方式写一个jquery QQ表情插件。

    在回复或是评论的时候,很多时间都需要有回复表情的功能,然后而需要插入QQ表情可以是最常见的. 插件也写多很多个了,这次写插件就下了一个决定.就是使用模块化来开发. 最后在我的源代码中有这样子一段: v ...

  3. Spring MVC 3.2 406 Not Acceptable

    Spring MVC 3.2 406 Not Acceptable 这个报错主要是因为SpringMVC配置文件配置问题. 修改步骤如下: 首先,修改spring-mvc.xsd为 spring-mv ...

  4. Source kit service terminated Editor functionality temporarily limited

    这下可好. Source kit service terminated Editor functionality temporarily limited 运行以下代码出现了以上的提示...另外,还压根 ...

  5. vscode编写插件详细过程

    前言 之前编写了一个vscode插件用vscode写博客和发布,然后有园友要求写一篇来介绍如何开发一个vscode扩展插件,或者说介绍开发这个插件的过程.然而文章还没有写,园子里面已经有人发布一个文章 ...

  6. Day22 JSONP、瀑布流

    一.JSONP JSONP a.Ajax $.ajax({ url:'/index/', dataType:'json', data:{}, type:'GET', success:function( ...

  7. [python]获取字符串类型

    >>>type(value) <class 'type'> >>>isinstance(value,type) True/False

  8. App接口设计原则－b

    1.记住密码不是真的让你记住密码,这里仅仅指的是一种自动登录的手段.不管在任何地方,明文存储的密码都是安全隐患,是必须尽量避免的.你可以采用某种方式对用户名.密码以及时间戳(重要)进行签名,再次登录时 ...

  9. Junit 源码剖析（二）

    junit4 下的所有的testcase都是在Runner下执行的, 可以将Runner理解为junit运行的容器, 默认情况下junit会使用JUnit4ClassRunner作为所有testcas ...

  10. MongoDB 模糊查询，及性能测试

    var mongodb = new MongoClient("mongodb://127.0.0.1:27017");//MongoServer.Create();//创建链接 v ...