理解 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. ajax提交form表单问题

    form表单提交数据可以省下大量大量获取元素的代码,局部刷新时也可以用ajax提交form表单,但是要先把表单序列化,再把后台javaBean对象序列化,但是你有可能前后台都执行了系列化,但是后台还是 ...

  2. session一致性架构设计

    什么是session? 由于HTTP协议是无状态的协议,因此它不会去记住上一次浏览器访问服务器时的信息.同一个用户的两次操作,与两个不同用户的操作,对它来说是一样的. 这样虽然满足了互联网web应用的 ...

  3. Python全栈学习_day001知识点

    今日大纲: . 变量. ***** . 常量.** . 注释.*** . 基础数据类型初识(int,str,bool). ***** . 用户输入 input ***** . 流程控制语句if. ** ...

  4. [总结]jQuery之选择器集合

    jQuery 的选择器可谓之强大无比,常用的元素查找方法: $("#myELement") //选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是my ...

  5. 【读书笔记】iOS-强类型与弱类型

    id类型是一个通用类型,OC使用id表示任意类型的对象,它可以作为一个占位符表示这是一个不确定的类型的对象或者引用.因此,所有的对象都 可以用id来表示.这很有用,想象一下,如果你需要实现一个通用的链 ...

  6. css清除默认样式

    CSS 清除默认样式   通常有以下几句就够了: *{margin:0;padding:0} li{list-style:none} img{vertical-align:top;border:non ...

  7. 两年AI研究经验(教训)总结，进来看看吧！

    https://www.jianshu.com/p/2149c9fee166 摘要: 本文以过来人的身份将自身2年的研究经验做了一下分享,希望本文对于即将开始从事人工智能研究的朋友有所帮助. 人工智能 ...

  8. “京东金融”主页效果 RecyclerView联动

    先上效果图吧: 第一个想到的实现方式是上面使用horizontalScrollview,下面使用Viewpager,经过尝试之后发现二者API有限,不能达到理想效果.几经折腾,最后上下都使用了自定义的 ...

  9. (网页)angular中实现li或者某个元素点击变色的两种方法(转)

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  10. JavaScript大杂烩1 - 理解JavaScript的类型系统

    随着硬件水平的逐渐提高,浏览器的处理能力越来越强大,本人坚信,客户端会越来越瘦,瘦到只用浏览器就够了,服务端会越来越丰满:虽然很多大型的程序,比如3D软件,客户端仍然会存在,但是未来的主流必将是浏览器 ...