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. stark组件开发之组合搜索基本显示

    数据的获取,上一篇,已经有了!然后就是,如何进行展示的问题.到了展示这里,又有了新的问题, 因为从数据库,取得的数据. 分为 queryset 和 tuple 两种数据结构.tuple 中,只是字符串 ...

  2. ArrayList的ConcurrentModificationException异常和多线程下的异常

    一.ConcurrentModificationException ArrayList源码看为什么出现异常: public class ArrayList<e> extends Abstr ...

  3. 软工作业1—java实现wc.exe

    github项目地址 https://github.com/liyizhu/wc.exe WC 项目要求 基本功能列表: wc.exe -c file.c     //返回文件 file.c 的字符数 ...

  4. weblogic中配置数据源

    Weblogic数据源配置 一.配置数据源 1.点击数据源,进入数据源配置页面,点击新建后选择一般数据源 2.输入名称和jndi名称(两个输入一样即可)后点击下一步 3.选择驱动后点击下一步 4.输入 ...

  5. 【MySQL】初识数据库及简单操作

    一.数据库概述 1.1 什么是数据(Data) 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算机. ...

  6. html 页面 判断第一个反应的网站并进行跳转 模仿CDN

    <!DOCTYPE html><html><head><meta charset="gb2312"><meta http-eq ...

  7. 【Java】基本数据类型

    基本知识点给个链接: https://blog.csdn.net/qwe969153746/article/details/53353534 问题: 1.3*0.1 == 0.3 返回什么: fals ...

  8. Aspose.Words提示The document appears to be corrupted and cannot be loaded.

    https://download.csdn.net/download/tomeatbj163/10428046

  9. js 中 (function($){...})(jQuery) 含义

    js中定义函数常用写法是 function name(arg){ //arg则是匿名函数的参数. //... } 调用函数时的写法是: name(arg); ===================== ...

  10. IntelliJ IDEA 控制台中文乱码解决方案

    配置Intellij的配置文件(在idea安装目录bin目录下) 打开Intellij的根目录,找到下图的两个文件(根据你的系统是32位或64位选择其中一个配置文件),在配置文件中添加: -Dfile ...