刚来到这里，趁着还没有忘记，来记录一下，昨晚学习的一个知识点——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. windows下配置wnmp

    最近尝试windows下配置nginx+php+mysql,在这里总结一下. 1.下载windows版本的nginx,官网​下载地址:http://nginx.org/en/download.htm, ...

  2. VC皮肤库之duilib

    首先是个国产的开源 的,directui 界面库,开放,共享,惠众,共赢,遵循bsd协议,可以免费用于商业项目,目前支持Windows 32 .Window CE.Mobile等平台. Duilib ...

  3. 用Django搭建个人博客—(3)

    今日主题 定义博客文章和评论的的数据库定义 定义操作这几个Model的后台数据 User表 USER_STATUS = ( ('active', u'激活'), ('suspended', u'禁用' ...

  4. Js 简单分页（一）

    网上有很多分页的插件 但是没有自己想要的 上代码吧,只有分页部分代码,css 省略了 html <div class="bar2 fr" id="pagecontr ...

  5. 切换view的动画

    代码: #import "MainViewController.h" @interface MainViewController () @end @implementation M ...

  6. 抓取天涯文章的蜘蛛代码，刚经过更新（因为天涯页面HTML代码变化）

    #_*_coding:utf-8-*- import urllib2 import traceback import codecs from BeautifulSoup import Beautifu ...

  7. Hibernate中的一对一关系详解(1)

    A:先讲讲一对一的关系(欲知其他关系,请看下篇) a:主键关联的一对一关系 一对一关系一般用主键关联,也就是说用主键值来维护两者的关系,一个表的主键存放另一个表的主键值.例如在员工与帐号中,我们取员工 ...

  8. [BZOJ 3995] [SDOI2015] 道路修建 【线段树维护连通性】

    题目链接:BZOJ - 3995 题目分析 这道题..是我悲伤的回忆.. 线段树维护连通性,与 BZOJ-1018 类似,然而我省选之前并没有做过  1018,即使它在 ProblemSet 的第一页 ...

  9. rm加转义很危险

    rm -r 想转义一个空格字符,转得不对 -r, -R, --recursive 递归删除目录及其内容 连续rm了n个不想rm的文件夹.%>_<% 想起来以前有人也因为rm的失误把整个wo ...

  10. java中的日期格式

    时间日期标识符: yyyy:年 MM:月 dd:日 hh:~12小时制(-) HH:24小时制(-) mm:分 ss:秒 S:毫秒 E:星期几 D:一年中的第几天 F:一月中的第几个星期(会把这个月总 ...