DocumentFragment使用

DocumentFragment相当于一份脱离document的文档，所以往其中添加元素，对其中元素做各种操作都不会影响到document文档，不会触发回流、重绘和重组等。使用它的好处在于，你可以合并多个dom操作，减少操作dom的次数。

var docFrag = document.createDocumentFragment();
for(var i = 0; i < waveCount; i++){var wave = document.createElement("div");//...docFrag.appendChild(wave); }document.body.appendChild(docFrag);

示例：使用div创建圆

DocumentFragment使用相关推荐

documentFragment深入理解
documentFragment是一个保存多个element的容器对象(保存在内存)当更新其中的一个或者多个element时,页面不会更新.只有当documentFragment容器中保存的所有ele ...
DocumentFragment文档片段示例
DocumentFragment文档片段属于Document的一个子集,但是效率却高很多,因为DocumentFragment构造的DOM树与结点,都是存放在内存里面,浏览器渲染也只需要一次,所以非常 ...
DocumentFragment
定义:创建一个新的空白的文档片段 let fragment = document.createDocumentFragment(); 一般用法:将元素追加到 fragment 中,再将 fragmen ...
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使用相关推荐

最新文章

热门文章