刚来到这里，趁着还没有忘记，来记录一下，昨晚学习的一个知识点——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. 11-18的学习总结(DOMSecondday)

    DOM:读取访问节点对象属性 批量删除父元素下所有子节点 elem.innerHTML=""; 批量替换父元素下所有子节点 elem.innerHTML="所有子元素标签 ...

  2. 序列化魔术函数__sleep()和反序列化魔术函数__wakeup()

    1.string serialize ( mixed $value )— 产生一个可存储的值的表示 serialize() 返回字符串,此字符串包含了表示 value 的字节流,可以存储于任何地方. ...

  3. Android Thread和AsyncTask

    1. 线程Thread 2. 异步任务AsyncTask ------------------------------------------------- --------------------- ...

  4. VS-FluentData 单元测试

    1. 使用VS2013建立一个控制台工程: using System; using System.Collections.Generic; using System.Linq; using Syste ...

  5. jdk各个版本

    http://www.cnblogs.com/langtianya/p/3757993.html

  6. OpenCV for c++Builder

    整理日: 20154/6 Borland C++BuilderでOpenCVを使う 確認 Turbo C++ 2007/03 1. ダウンロード&インストール http://sourcefor ...

  7. golang开发android环境搭建_window

    golang开发android环境搭建介绍 一 安装依赖软件: git:版本管理 go:  go开发环境(版本>=1.5),可直接下载window版的go安装包. android studio: ...

  8. LightOj_1265 Island of Survival

    题目链接 题意: 在孤岛生存, 孤岛上有t头老虎,d头鹿, 每天会出现随机出现两只生物(包括你自己), 如果出现了一只老虎,那么你将被吃掉, 如果两只老虎, 则两只老虎会同归于尽,其他情况你都将生存下 ...

  9. Reason: image not found 错误解决方法

    dyld: Library not loaded: /System/Library/Frameworks/Social.framework/Social   Referenced from: /var ...

  10. html5--indexedDB

    http://www.cnblogs.com/Johnny_Z/archive/2012/11/04/2753331.html http://database.51cto.com/art/201202 ...