刚来到这里，趁着还没有忘记，来记录一下，昨晚学习的一个知识点——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. 《cut命令》-linux命令五分钟系列之十九

    本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...

  2. js快速排序法

    var quickSort = function(arr) { if (arr.length <= 1) { return arr; } var pivotIndex = Math.floor( ...

  3. Android 6.0 Permission权限与安全机制

    Marshmallow版本权限修改 android的权限系统一直是首要的安全概念,因为这些权限只在安装的时候被询问一次.一旦安装了,app可以在用户毫不知晓的情况下访问权限内的所有东西,而且一般用户安 ...

  4. 初试jQuery EasyUI

    jQuery EasyUI jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...

  5. SOSEx ReadMe

    Quick Ref:--------------------------------------------------bhi [filename] BuildHeapIndex - Builds a ...

  6. UFLDL教程之（三）PCA and Whitening exercise

    Exercise:PCA and Whitening 第0步:数据准备 UFLDL下载的文件中,包含数据集IMAGES_RAW,它是一个512*512*10的矩阵,也就是10幅512*512的图像 ( ...

  7. spring与mybatis，strut2整合连接sqlserver不的不说的那点事儿

    今天在通过spring与mybatis整合中,想连接下公司用的sqlserver数据库,结果使用Junit测发现没连上,于是就有了下面的问题: 准备工作都已经做好了 web中spring的监听配置了 ...

  8. Hbase 学习笔记（一） Hbase的物理模型 Hbase为每个值维护了一个多级索引，即<key, column family, column name, timestamp>

      比如第一个region 代表 0-100 第二个region 代表 101 -200的 分的越多越不好管理,但同时方便了并行化处理,并发度越高,处理的越快.mapreduce就是按照rowkey的 ...

  9. 如何使用 Laravel Facades ？

    Facade 布局是在面向对象编程中经常使用的一种软件设计布局方式.Facade 实际上是一种包括复杂函数库的类,提供了更加简洁易读的接口.Facade 布局还能为一组结构复杂.设计简陋的 API 提 ...

  10. 【 POJ - 1204 Word Puzzles】（Trie+爆搜|AC自动机）

    Word Puzzles Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 10782 Accepted: 4076 Special ...