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

通常情况下修改、删除或者增加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);