js-文档碎片的理解与使用

文档碎片

前提：js操作dom

每次对dom的元素的操作都会触发’重排’ (重新渲染页面，发生重绘、回流) ，严重影响到能耗，一般采取的做法是尽可能地减少操作dom元素，减少重绘

什么是文档碎片？

文档碎片独立于DOM树之外，存在于内存中，在创建之初为一个空白的文档片段，
document.createDocumentFragment() 一个容器，用于暂时存放创建的dom元素

文档碎片有什么用？

将需要添加的dom元素先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大的减少dom操作，提高性能
（IE和火狐比较明显）

比如需要往页面添加100个元素，

for(let i=100;i>0;i--){var ele = document.createElement('div');document.body.appendChild(ele);
}

文档碎片操作：

var docFra = document.createDocumentFragment();
for (var i =100;i>0;i--){var ele = document.createElement('div');docFra.appendChild(ele)
}
document.body.appendChild(docFra);

js-文档碎片的理解与使用相关推荐

JS性能优化之文档碎片-document.createDocumentFragment
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新 ...
web前端分享：性能优化之文档碎片处理
有不少同学在前端开发面试的时候会被问到性能优化的相关问题,做好优化是一件非常重要的事情,今天小千就来给大家介绍一下文档碎片的处理方式. 性能优化之文档碎片一般情况下,在操作DOM结构的时候,经常会说 ...
有关文档碎片（document fragment）的用法
通常情况下修改.删除或者增加DOM元素.更新DOM会导致浏览器重新绘制屏幕,也会导致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量减少更新DOM,这也就意味着将DOM的改变分批处理, ...
Node.js 文档（目录）
Node.js 文档 Node.js®是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时. 提供以下几种类型的文档: API参考文档 ES6功能指南 API参考文档 ...
JQuery创建文档碎片
(1)文档碎片可以提高DOM的操作性能.比如要插入一万个li标签,如果没有文档碎片,就必须插入一个然后页面渲染一次,插入完全部就要渲染一万次,太损耗性能.利用文档碎片,可以先把需要修改的全部放入文档碎 ...
babylon.js文档笔记
babylon 一基本使用引入 <script src="https://preview.babylonjs.com/babylon.js"></script ...
从文档流角度理解浏览器页面渲染引擎对元素定位的解析
文档流:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流. 我们在排列元素时,遵循"流式结构",即元素遵循从上向下,从左向右堆叠的规则,所以我们在排列元素 ...
xpath用于HTML文档通过元素,理解HTML和XPath
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 我们已经知道HTML是文本标记语言,那么HTML和浏览器有什么样的关系呢? 当我们在浏览器中输入URL到浏览器显示出页面 ...
simple-uploader.js 文档
simple-uploader.js(也称 Uploader) 是一个上传库,支持多并发上传,文件夹.拖拽.可暂停继续.秒传.分块上传.出错自动重传.手工重传.进度.剩余时间.上传速度等特性:该上传库 ...

js-文档碎片的理解与使用

文档碎片

什么是文档碎片？

文档碎片有什么用？

js-文档碎片的理解与使用相关推荐

最新文章

热门文章