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

Posted 2020-09-25 yfceshi

通常情况下改动、删除或者添加DOM元素。

更新DOM会导致浏览器又一次绘制屏幕，也会导

致reflow,这样会带来巨大的开销。我们通常解决这的办法尽量降低更新DOM。这也就意

味着将DOM的改变分批处理。并在“活动”文档树之外运行这些更新。

当须要创建一个相对照较大的子树。应该在子树全然创建之后再将子树加入到DOM树中。

这时採用文档碎片技术来容纳全部的节点。

//反样例
//在创建时马上加入节点

var p,t;

p = document.createElement(‘p‘);
t = document.createTextNode(‘first p‘);
p.appendChild(t);
document.body.appendChild(p);


p = document.createElement(‘p‘);
t = document.createTextNode(‘second p‘);
p.appendChild(t);
document.body.appendChild(p);

创建文档碎片来离线升级节点信息是更好的做法。当将文档碎片加入到DOM树时，并非

将碎片加入到DOM树中，而是将文档碎片的内容加入进DOM树中。

文档碎片是一种非常好的

方法，能够用来封装很多节点信息，甚至这些节点并没有合适的父节点。

例如以下演示样例：

var p,t,frag;
frag = document.createDocumentFragment();
p = document.createElement(‘p‘);
t = document.createTextNode(‘first p‘);
p.appendChild(t);
frag.appendChild(p);

p = document.createElement(‘p‘);
t = document.createTextNode(‘second p‘);
p.appendChild(t);
frag.appendChild(p);

document.body.appendChild(frag);

在上面样例中，活动的文档只更新了一次并触发一次屏幕重绘。而第一个样例中，每

运行一个段落都会重绘一次。

在为DOM树加入新节点时文档碎片是非常实用的。但在更新DOM现有部分时。仍然能够批处理提交改动。

详细的方法是为须要改动的子树的根节点建立一个克隆镜像，然后对克隆镜像做全部的改动操作，在完毕操作后用克隆镜像替换原来的子树。

var old = document.getElementById(‘result‘),
    clone = old.cloneNode(true);
old.parentNode.replaceChild(clone,old);