DocumentFragment类型

除开昨天我们了解的两种不常用的类型之外

今天我们要介绍的两种类型可以说使用频率不输于前面最常用的几种元素类型

首先就是DocumentFragment类型

有些小伙伴可能没有听说过这个类型,但是这个类型在前端性能优化方面有着举足轻重的作用

应该是仅次于VirtualDOM(虚拟节点技术)的

那么为什么大家对这种类型没有太多的感触呢?

因为只有这种类型没有对应的DOM标记,也就是说没法通过解析页面代码获得

书中对该类型的定义如下:

是一种轻量级文档,可以包含和控制节点,但不会像普通的页面那样占用浏览器资源

该类节点具有以下特征:

1、nodeType:11

2、nodeName:"#document-fragment"

3、nodeValue:null

4、parentNode:null

这类节点说白了就是不完整的文档

当然也不属于当前的页面的文档

所以通常用于暂存页面的节点变动,比如有时候我们可能需要循环添加一些DOM内容

但是每一次循环浏览器都会进行页面的重排、重绘等,以此来展现变更的内容

然而实际上,在很多情况下我们实际上要的只是最终的结果

至于其中循环了几次,进行了多少次的操作我们并不关心

这种时候我们就需要使用 DocumentFragment 来保存节点的变动,然后一次性渲染到页面上

例如如下代码:

var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null; for(let i = 0;i<10;i++){
li = document.createElement("li");
li.appendChild(document.createTextNode("Iten"+i));
fragment.appendChild(li);
} ul.appendChild(fragment); //将Fragment中的节点删除并移入文档

所以我们平时在不使用框架的时候,这些优化页面性能的方式还是十分重要的

Javascript高级编程学习笔记(41)—— DOM(7)DocumentFragment类型的更多相关文章

  1. Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  2. Javascript高级编程学习笔记(37)—— DOM(3)Element

    Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...

  3. Javascript高级编程学习笔记(35)—— DOM(1)节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

  4. Javascript高级编程学习笔记(71)—— 模拟事件(1)DOM事件模拟

    事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...

  5. Javascript高级编程学习笔记(45)——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  6. Javascript高级编程学习笔记(42)—— DOM(8)Attr类型

    Attr类型 我们在之前的文章中提到了,元素有一个 attributes 属性 该属性保存了一个 NamedNodeMap 集合 该集合中的元素也就是今天我们所要记叙的 attr 类型 主要就是方便我 ...

  7. Javascript高级编程学习笔记(40)—— DOM(6)CDATASection、DocumentType

    CDATASection类型 CDATASection类型是只针对XML文档的类型 因为浏览器无法解析 在浏览器中创建CDATASection的函数也无法正常使用 该类型有以下属性 nodeType: ...

  8. Javascript高级编程学习笔记(39)—— DOM(5)Comment

    Comment类型 顾名思义,comment类型指的就是注释节点在HTML文档中的类型 也就是说平时我们在代码中的注释,在HTML解析的时候也会被解析为一类节点 让我们可以根据这些节点进行一系列的操作 ...

  9. Javascript高级编程学习笔记(38)—— DOM(4)Text

    Text类型 html页面中的纯文本内容就属于Text类型 纯文本内容可以包含转义后的html字符,但不能包括 html 代码 text类型具有以下属性.方法 nodeType:3 nodeName: ...

随机推荐

  1. localhost换成127.0.0.1和本机IP打不开本地项目了的问题

    点击桌面右下角的小三角, iis express右键—>显示所有应用程序—>点击网站名称,配置文件路径,找到配置文件,以记事本打开, 按照configuration--system.app ...

  2. 有关在Eclipse中安装STS(Spring Tool Suite)的若干问题总结

    1.之前说明 在网上找了很多安装的方法,每次在线安装总会出现各种各样的问题,本地安装也是出现同样的问题(后来发现是下载的包有问题) 还有其他问题(忘记截图了,上图来自网络),大概就是这些各种各样的错误 ...

  3. filter 全局和局部过滤器

    1,局部过滤器 2,全局过滤器 使用方法相同,在花括号中使用过滤器名或者v-bind中使用

  4. Mac/Linux/Centos终端中上传文件到Linux云服务器

      1.mac上传文件到Linux服务器  scp 文件名 用户名@服务器ip:目标路径 如:scp /Users/test/testFile test@www.linuxidc.com:/test/ ...

  5. js调用后台方法

    一种方法是使用ajax调用$.ajax({type: "POST",//传输方式url: "",//action路径data: "",//传 ...

  6. 4-1 requests库的安装

    1.  一切安装从简就行了直接打开cmd命令窗口输入 pip install requests  把复杂的问题简单化,我这个已经安装好了.会提示已经安装. 2.打开cmd 输入python 这个会提示 ...

  7. WCF系列_WCF如何选择不同的绑定

    内容转载自<WCF核心技术> 开发者不用直接操作信道范型,而是由WCF根据服务OperationContract来选择合适的信道范型.大多数信道范型都有无会话两种变体.有会话信道会在客户端 ...

  8. Java第4次实训作业

    编写"电费管理类"及其测试类. 第一步 编写"电费管理"类 私有属性:上月电表读数.本月电表读数 构造方法:无参.2个参数 成员方法:getXXX()方法.se ...

  9. python3 第三十三章 - 标准库概览Part II

    第二部分提供了更高级的模块用来支持专业编程的需要.这些模块很少出现在小型的脚本里. 1. 输出格式化reprlib 模块提供了一个用来缩写显示大型或深层嵌套容器的 定制版repr() . >&g ...

  10. 检索html页自生成&nasp;标签,并替换为空(即去掉空格)

    在开发过程中,遇到这样的一种情况,就是页面有时候不知道什么原因会自动生成一些元素,从而打乱自己原有的一些布局. 原html页源代码: 生成后的html源代码: 可以明显看出自动生成了很多   元素,现 ...