理解 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. Java学习笔记之——类与对象

    1.参数的传递方式 1)值传递 2)引用传递 2.类和对象: (1)类的定义: public class 类名{ 类型 属性1: 类型 属性2: ……… public 返回值类型 方法名1(形参){ ...

  2. Java-关于类

    java-关于类-成员初始化问题 成员初始化出现错误“    - Syntax error on token ";", , expected” java类不允许对成员进行操作,但可 ...

  3. LVS+keepalived 实战

    安装依赖: yum -y install wget libnl* popt* gcc.x86_64 gcc-c++.x86_64 gcc-objc++.x86_64 kernel-devel.x86_ ...

  4. csharp: using HtmlAgilityPack and ScrapySharp reading Url find text

    https://github.com/exaphaser/ScrapySharp https://github.com/zzzprojects/html-agility-pack https://gi ...

  5. 【读书笔记】iOS-viewWillAppear:和viewDidLoad:

    viewDidLoad:是视图第一次载入到内存中后调用的,viewWillApear:则是在每次视图显示到屏幕上之前调用. 参考资料:<iOS编程指南>

  6. React 入门学习笔记整理（二）—— JSX简介与语法

    先看下这段代码: import React from 'react'; //最终渲染需要调用ReactDOM库,将jsx渲染都页面中 import ReactDOM from 'react-dom'; ...

  7. (网页)angular js 终极购物车(转)

    转自CSDN: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. C# JObject和JArray 的分享

    最近在调用别人的搜索引擎接口时遇到了一种返回类型为数组的情况,如 {  "result": [     //根据用户输入搜索匹配到的标题数组         "我是一条新 ...

  9. WebStorm连接Github教程

    上学期刚开学的时候看过一次git相关的内容,很久没用过,忘了,两个月前又看了一次还精心做了笔记,也没有具体使用,又忘了,所以,避免又双叒叕忘了,我决定正式把git用起来.刚开始是通过Git Bash来 ...

  10. char/varchar/nvarchar的区别

    原文:https://blog.csdn.net/w516162189/article/details/78914035 我们在设计数据库的时候,需要根据需求场景选择合适的字段类型,对数据的执行效率有 ...