谈谈对文档碎片的理解

js操作DOM时发生了什么？

　　js每次操作DOM都出发了回流，这非常的消耗性能。

什么是文档碎片容器？

　　document.createDocumentFrgement()----用于暂时存放创建的DOM元素。

文档碎片容器有什么用？

　　将需要添加到body中的元素先添加到碎片容器中，再把碎片容器插入到对应的位置，这样可以减少DOM操作，提高性能。

原文地址：https://www.cnblogs.com/wuqilang/p/11253627.html

时间： 2024-08-06 18:18:35

谈谈对文档碎片的理解的相关文章

【JS学习笔记】DOM操作应用-创建、插入和删除元素；文档碎片

一.创建.插入和删除元素 (1)创建DOM元素 createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点例子:为ul插入li <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt

jQuery 文档碎片处理

通过JS操作DOM节点可能以节点为单位进行,比如添加节点,可以createElement,createTextNode,然后用appendChild把文本节点和容器节点绑定在一起,然后再用appendChild或insertBefor添加到DOM树中.但如果要往DOM树中动态添加大量的节点.就会很麻烦.而且每次都会刷新DOM,造成性能上的缺陷. 解决方法是使用文档碎片这个方法创建文档碎片. 我个人觉得应该把这个翻译成文档片段比较合适. 使用jQuery解决方案. <span style="

js文档碎片

今天看视频发现个有意思的东西,叫做文档碎片?文档碎片是什么呢?先卖个关子. 平常我们在向文档中插入节点的时候可能创建了节点就马上插入父元素,因此浏览器会一直渲染.插入的数量少可能还没影响,可是当插入的节点成千上万的时候,会发现浏览器卡顿了......如何解决这种问题呢?这里我们就要用到文档碎片了.在创建节点之后我们可以先把节点append在文档碎片上,在将所有的节点append之后再将文档碎片append在父元素上,理论上会快一些.经测试,有些时候要快一点^_^...... 1.普通插入 <in

document文档碎片

var arrText = ["1","2","3","4","5","6","7","8","9","10"]; var oFragment = document.createDocumentFragment(); for(var i=0;i<arrText.length;i++) { var oP

有关文档碎片（document fragment）的使用方法

通常情况下改动.删除或者添加DOM元素. 更新DOM会导致浏览器又一次绘制屏幕,也会导致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量降低更新DOM.这也就意味着将DOM的改变分批处理.并在"活动"文档树之外运行这些更新. 当须要创建一个相对照较大的子树.应该在子树全然创建之后再将子树加入到DOM树中. 这时採用文档碎片技术来容纳全部的节点. //反样例 //在创建时马上加入节点 var p,t; p = document.createElement('p'); t

有关文档碎片（document fragment）的用法

通常情况下修改.删除或者增加DOM元素.更新DOM会导致浏览器重新绘制屏幕,也会导致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量减少更新DOM,这也就意味着将DOM的改变分批处理,并在"活动"文档树之外执行这些更新. 当需要创建一个相对比较大的子树,应该在子树完全创建之后再将子树添加到DOM树中, 这时采用文档碎片技术来容纳所有的节点. //反例子 //在创建时立即添加节点 var p,t; p = document.createElement('p'); t =

DocumentFragment(创建文档碎片节点)

使用DocumentFragment进行缓存操作,引发一次回流和重绘: 在更新少量节点的时候可以直接向document.body节点中添加,但是当要向document中添加大量数据是,如果直接添加这些新节点,这个过程非常缓慢,因为每添加一个节点都会调用父节点的appendChild()方法,为了解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片一次性添加到document中. 假如想创建十个段落,使用常规的方式可能会写出这样的代码: 1 2 3 4 5 6 for(var

js性能优化篇创建文档碎片

大家都知道,大量的操作DOM会引起页面的渲染变慢,文档碎片是指一个临时的文档,把创建的dom放到文档里面,不要每次操作都操作DOM,提高页面的效率.下面我们就来看一下如何运用创建文档碎片. 首先,我们了解下向页面创建dom发生了什么. for(var i=0;i<5000;i++){ var oSpan=document.createElement('span') document.body.appendChild(oSpan) } 如果我们向以上代码一样,向页面插入很多dom元素,这种渲染的过

使用文档碎片（DocumentFragments）追加DOM元素

标签(空格分隔): JavaScript DocumentFragment接口表示一个没有父级文件的最小文档对象.它被当做一个轻量版的Document使用,用于存储已排好版的或尚未打理好格式XML片段.最大的区别是因为DocumentFragment不是真实DOM树的一部分,它的变化不会引起DOM树的重新渲染的操作(reflow),且不会导致性能等问题. 最常用的方法是使用文档片段作为参数(例如,任何Node接口类似Node.appendChild和Node.insertBefore的方法),这