理解 DocumentFragment

含义：创建文档片段，它继承了Node的所有方法，对DOM操作性能非常好。
创建文档片段 如下方法：

var frag = document.createDocumentFragment();

文档片段有三个node属性，nodeType, nodeName, nodeValue; 他们的值分别是 11, '#document-fragment', null, 文档片段节点没有父节点parentNode. 如下代码演示：

var frag = document.createDocumentFragment();

 console.log(frag.nodeType);  //

 console.log(frag.nodeValue); // null

 console.log(frag.nodeName);  // #document-fragment

 console.log(frag.parentNode); // null

它有什么作用呢？
我们经常使用js来操作DOM操作，比如向页面中插入元素，每次插入元素的时候，浏览器会发生重绘，都需要重新渲染页面，如果做大量的这样的操作，非常影响性能的，影响用户体验。
比如如下代码：

var ul = document.getElementById("ulId");

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

   var li = document.createElement('li');

   li.innerHTML = "aaa" + i;

   ul.appendChild(li)

 }

我们知道每一次插入都会引起重新渲染(计算元素的尺寸，显示内容等)，会重新重绘页面，因此会影响性能的，我们最常见还有一种方法是将创建的元素写到一个字符串上，然后一次性写到innerHTML上，这种使用浏览器对innerHTML的解析比上面多次插入快很多，但是构造字符串灵活性比较差，很难符合创建各种各样的DOM元素。如下代码：

var ul = document.getElementById("ulId");

var ihtml = '';

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

  ihtml += '<li>'+i+'</li>';

}

ul.innerHTML = ihtml;

但是使用DocumentFragment，可以弥补上面两种方法的不足。
DocumentFragment是没有父节点的最小文档对象，常用于存储html和xml文档，它继承了Node，因此它有Node的所有属性和方法，完全可以操作Node那样操作DocumentFragment.

DocumentFragment文档片段是存在于内存中的，没有在DOM中，所以将子元素插入到文档片段中不会引起页面回流，因此使用DocumentFragment可以起到性能优化作用。
比如上面插入的代码可以改成如下：

<!DOCTYPE html>

 <html>

  <head>

    <meta charset="utf-8">

    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="black" name="apple-mobile-web-app-status-bar-style">

    <meta content="telephone=no" name="format-detection">

    <meta content="email=no" name="format-detection">

    <title>标题</title>

    <link rel="shortcut icon" href="/favicon.ico">

  </head>

  <body>

    <ul id="ulId"></ul>

    <script>

     var ul = document.getElementById("ulId");

     var frag = document.createDocumentFragment();

     var ihtml = '';

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

       var li = document.createElement('li');

       li.innerHTML = "index: " + i;

       frag.appendChild(li);

     }

     ul.appendChild(frag);

    </script>

  </body>

</html>

理解 DocumentFragment的更多相关文章

  1. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  2. documentFragment深入理解

    documentFragment是一个保存多个element的容器对象(保存在内存)当更新其中的一个或者多个element时,页面不会更新.只有当documentFragment容器中保存的所有ele ...

  3. 页面优化，DocumentFragment对象详解

    一.前言 最近项目不是很忙,所以去看了下之前总想整理的重汇和回流的相关资料,关于回流优化,提到了DocumentFragment的使用,这个对象在3年前我记得是有看过的,但是一直没深入了解过,所以这里 ...

  4. 理解Shadow DOM(一)

    1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...

  5. 虚拟节点操作——DocumentFragment

    文章中转站: DocumentFragment对象 createDocumentFragment()用法总结 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

  6. 理解HTML5中Range对象

    1.理解Range对象    重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~  什么是Range对象? 在H ...

  7. 从原型链看DOM－－Comment,CDATASection,DocumentType,DocumentFragment,Attr类型

    这次总结的是剩下的这些DOM类型节点,可能你见过却不经常使用但是了解一下总是好的,可以加深对DOM体系的整体理解~.本篇要介绍的是Comment,CDATASection,DocumentType,D ...

  8. 测试应用documentFragment 和 直接操作dom 的区别

    DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null. 不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment ...

  9. DocumentFragment的相关用法

    额,今天看了vue1.0关于模板渲染的知识,认识了DocumentFragment这个东西,它相当于一个节点容器,我们对他使用appendChild时,只有它的子节点会被插入进去,它本身不会插入进去, ...

随机推荐

  1. (白话理解)CAS机制

    (白话理解)CAS机制 通过一段对话我们来了解cas用意 示例程序:启动两个线程,每个线程中让静态变量count循环累加100次. 最终输出的count结果是什么呢?一定会是200吗? 加了同步锁之后 ...

  2. 利用反射调用注解，模仿Spring

    简介 在开发中,我们经常用的就是利用@RequestMapping来调用我们自己的逻辑,现在我们来创建属于自己的注解模仿一下它. 1.新建属于自己的注解@SeayaMapping @Target({E ...

  3. 关于在WP8.1中使用剪贴板的问题

    熟悉WindowsPhone8.0和WindowsPhone8.1开发的朋友都应该很清楚,在windowphone8.0的 开发时代下,我们可以很轻松的使用系统提供的API进行简单的文本拷贝和复制.但 ...

  4. Python 练习: 简单的用户登录判断

    _user = "klvchen" _passwd = " counter = 0 while counter < 3: username = raw_input( ...

  5. SQLite 知识摘要 --- 事务

    在许多时候,我们在使用大数据的时候会发现,尽管sqlite数据库的执行效率已经很快了,但是还是满足不了我们的需求,这时候我们会很容易考虑到使用并发的方式去访问sqlite数据库,但是sqlite数据独 ...

  6. 原生js实现二级联动下拉列表菜单

    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...

  7. Python中DataFrame关联

    df = pd.merge( df, # 左 wzplbm, # 右 left_on = ['WZBM','ZBWZMC'], # 左DataFrame匹配列 right_on = ['WZPLBM' ...

  8. scrapy简单分布式爬虫

    经过一段时间的折腾,终于整明白scrapy分布式是怎么个搞法了,特记录一点心得. 虽然scrapy能做的事情很多,但是要做到大规模的分布式应用则捉襟见肘.有能人改变了scrapy的队列调度,将起始的网 ...

  9. 第一章 Hyper-V 2012 R2角色部署

      在windows server 2012 R2中,我们可以通过安装hyper-v角色来完成虚拟化底层架构的部署.除了图形界面的安装,也可以使用单独的发行版Hyper-V Server 2012 R ...

  10. NetBeans数据库笔记---三层架构

    1.创建数据库,数据表 用MySQL数据库和Navicat for MySQL工具创建表 2.创建实体类——反应表结构(列——变量) 也就是对应表建立的gets和sets方法,实体类的名字一般都与数据 ...