理解 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. WINCE 下载地址（转）

    WinCE 6.0 安装包比较大,从微软下载时,它只提供一个下载工具,用它下载比较慢在网上查了些资料,把WinCE所需的安装包地址都收集起来了,安装包文件名都是有规律的,可以用迅雷新建批量任务来下载, ...

  2. jquery之行自加自减

    实现目标:点击按钮复制本行,修改后重新插入到本行后面,点击复制出的行可删除本行 代码如下: <!DOCTYPE html> <html lang="en"> ...

  3. python联系题1

    一.有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. # _*_ ...

  4. 微信小程序测试二三事

    微信小程序虽是微信推出的新形态的产品,但是在测试思路上跟其他的传统测试,大相径庭.既然大相径庭,那我们该如何测试呢. 功能测试功能测试跟传统的web功能测试一样,不是app的功能测试哦.这是因为小程序 ...

  5. MySQL 性能优化--优化数据库结构之优化数据类型

    MySQL性能优化--优化数据库结构之优化数据类型   By:授客  QQ:1033553122   优化数字数据(Numeric Data) l   对于唯一ID或其它可用字符串或数字表示的值,选择 ...

  6. android 保存图片，及将图片更新到图库

    **保存图片 public static File saveImage(Bitmap bmp) { File appDir = new File(Environment.getExternalStor ...

  7. Android View体系（一）视图坐标系

    前言 Android View体系是界面编程的核心,他的重要性不亚于Android四大组件,在这个系列中我会陆续讲到View坐标系.View的滑动.View的事件分发等文章来逐步介绍Android V ...

  8. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  9. java解析复杂json：JSONObject 和 JSONArray的使用

    在正式解析之前,我们需要下载解析Json所需要的jar包,一共有7个. 下载地址如下:https://download.csdn.net/download/zai_xia/10374080 大家也可以 ...

  10. Github API

    Web API web api是网站的一部分,用于与使用非常具体的URL请求特定信息的程序交互,这种请求被称为API调用.请求的数据将以易于处理的格式(如JSON或CSV)返回:依赖于外部数据源的大多 ...