刚来到这里，趁着还没有忘记，来记录一下，昨晚学习的一个知识点——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. PHP 编译问题PEAR package PHP_Archive not installed的解决

    php 的编译时需要依赖pear package ,目前的问题错误"PEAR package PHP_Archive not installed",已经明显报出这个问题. 因此编译 ...

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

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

  3. jquery学习之旅

    在jQuery中,css()方法的功能是设置或获取元素的某项样式属性. $<"div">.css("font-weight","bold& ...

  4. 机器学习系列(17)_Yelper推荐系统

     1. 我们为什么需要推荐系统?“推荐”可是个当红话题.Netflix愿意用百万美金召求最佳的电影推荐算法,Facebook也为了登陆时的推荐服务开发了上百个项目,遑论现在市场上各式各样的应用都需要个 ...

  5. 移动端消除click事件的延迟效果

    https://github.com/Plaputta/jquery.event.special.fastclick 用fastclick事件,类似zepto的tap事件,若想去除连点效果,可在外层显 ...

  6. learn-python3

    # learn-python3   这是我初学Python时写的一套Python基础示例程序.主要基于廖雪峰老师的Python3教程和<<深入理解Python>>. 感谢! 下 ...

  7. SEMAT[软件工程方法和理论 Software Engineering Method and Theory]

    Agile software development Agile software development is a group of software development methods bas ...

  8. 读书笔记－《Training Products of Experts by Minimizing Contrastive Divergence》

    Training Products of Experts by Minimizing Contrastive Divergence(以下简称 PoE)是 DBN 和深度学习理论的 肇始之篇,最近在爬梳 ...

  9. WPF ListView的使用及Linq to XML练习

    环境:VS2010 控件:ListView 技术:Linq to XML:MVVM 源码:http://files.cnblogs.com/jumahe/Wpf_Customer.rar 布局描述: ...

  10. 把Blob 转化为字符串查询。

    在Oracle里面,有时候我们对于clob或者是blob作为varhcar2来查询. Clob可以直接使用 to char函数来转换. Blob就需要用 UTL_RAW.CAST_TO_VARCHAR ...