DocumentFragment(创建文档碎片节点)

使用DocumentFragment进行缓存操作，引发一次回流和重绘；

在更新少量节点的时候可以直接向document.body节点中添加，但是当要向document中添加大量数据是，如果直接添加这些新节点，这个过程非常缓慢，因为每添加一个节点都会调用父节点的appendChild()方法，为了解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片一次性添加到document中。

假如想创建十个段落，使用常规的方式可能会写出这样的代码：


1

2

3

4

5

6

for(var i = 0 ; i < 10; i ++) {

    var p = document.createElement("p");

    var oTxt = document.createTextNode("段落" + i);

    p.appendChild(oTxt);

    document.body.appendChild(p);

}

但是他调用了十次document.body.appendChild()，每次都要产生一次页面渲染。这时碎片就十分有用了：


1

var oFragment = document.createDocumentFragment();

1

2

3

4

5

for(var i = 0 ; i < 10; i ++) {

    var p = document.createElement("p");

    var oTxt = document.createTextNode("段落" + i);

    p.appendChild(oTxt);

    oFragment.appendChild(p);<br>}

1

document.body.appendChild(oFragment);

在这段代码中，每个新的<p />元素都被添加到文档碎片中，然后这个碎片被作为参数传递给appendChild()。这里对appendChild()的调用实际上并不是把文档碎片本省追加到body元素中，而是仅仅追加碎片中的子节点，然后可以看到明显的性能提升，document.body.appenChild()一次替代十次，这意味着只需要进行一个内容渲染刷新。

时间： 2024-10-21 21:24:58

DocumentFragment(创建文档碎片节点)的相关文章

【笔记】科普createDocumentFragment() 创建文档碎片节点

上一篇文章说到了动态添加文本节点的方法那如果我们要添加多个文本节点或者元素节点呢? 大家可能会想到用循环然后逐个逐个添加 但是别忘了js 还提供了创建一个文本碎片的方法 createDocumentFragment(); 这个方法怎么用呢? 其实这个方法就相当于一个收集器 把所有要添加的元素收集起来再打包添加到body里面 思路就是这样以下分享一下代码 <!DOCTYPE html> <html lang="en"> <head> <meta

createDocumentFragment创建文档碎片节点

<script>    var div=document.createElement("div");    div.id="test";    var img=document.createElement("img");    img.src="a.jpg";    div.appendChild(img);        var frag=document.createDocumentFragment();  

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

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

【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="

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 =

JS JavaScript中的文档碎片 DocumentFragement JS性能优化

文档碎片是什么: 如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的.但是如果我们使用文档碎片了,我们可以先将100个li添加到文档碎片中,然后直接把这个文档碎片追加到ul中即可.所以文档碎片其实就是一个临时的仓库. 如下代码在document.body中添加5个span for(var i=0;i<5;i++) { var op = document.createElement("s