DocumentFragment

定义：创建一个新的空白的文档片段

let fragment = document.createDocumentFragment();

一般用法：将元素追加到 fragment 中，再将 fragment 追加到DOM树上，并且 fragment 被自身子元素代替,即DOM树中不会显示 fragment, 只显示 fragment 中的元素

var ulinfo = document.createElement('ul');
var fragment = document.createDocumentFragment();for(var i = 0;i < 6;i++){var li = document.createElement('li');fragment.appendChild(li);
}ulinfo.appendChild(fragment);

优点：会带来更好的性能。因为文档片段存在于内存中，而不是在DOM树中。在动态添加元素时，使用文档片段不会引起页面回流（对元素位置和几何上的运算），可以使性能更优。

DocumentFragment相关推荐

documentFragment深入理解
documentFragment是一个保存多个element的容器对象(保存在内存)当更新其中的一个或者多个element时,页面不会更新.只有当documentFragment容器中保存的所有ele ...
DocumentFragment使用
DocumentFragment相当于一份脱离document的文档,所以往其中添加元素,对其中元素做各种操作都不会影响到document文档,不会触发回流.重绘和重组等.使用它的好处在于,你可以合并 ...
DocumentFragment文档片段示例
DocumentFragment文档片段属于Document的一个子集,但是效率却高很多,因为DocumentFragment构造的DOM树与结点,都是存放在内存里面,浏览器渲染也只需要一次,所以非常 ...
html,xml_网页开发_爬虫_笔记
20220402 笔记本走手机热点,重连之后又是另一个ip 20220331 https://mp.weixin.qq.com/s/znXuCB0Fl32TbP_0UaO6SQ 爬虫相关知识快速复习 ...
jquery 1.7.2源码解析（二）构造jquery对象
构造jquery对象 jQuery对象是一个类数组对象. 一)构造函数jQuery() 构造函数的7种用法: 1.jQuery(selector [, context ]) 传入字符串参数:检查该字符 ...
Vue.js双向绑定的实现原理
Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...
Web API 接口-JavaScript全部api接口文档
当使用JavaScript编写网页代码时,有很多API可以使用.以下是所有对象.类型等接口的列表,你在开发网页应用程序或站点时使用它们. API文档地址:https://developer.mozil ...
javascript实例
数组排序 ①冒泡排序思路: 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素 ...
BOM 浏览器对象模型和DOM 文档对象模型
浏览器对象模型BOM 1. 浏览器对象模型介绍 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可 ...

DocumentFragment

DocumentFragment相关推荐

最新文章

热门文章