document.createDocumentFragment 方法

基本概念

 

document.createDocumentFragment 方法会创建一个 DocumentFragment 对象，该对象是一个存在于 DOM 树之外的 DOM 节点。它有一个非常有用的特性：当 DocumentFragment 节点被插入 DOM 树时，插入 DOM 树的其实并不是 DocumentFragment 节点，而是它的所有子孙节点（即 DocumentFragment 节点本身会自动消失）。这个特性使其常被拿来当作 DOM 操作的 buffer，即当有大量 DOM 节点插入 DOM 树时，我们会首先把它们插入 DocumentFragment 节点（由于 DocumentFragment 节点不在 DOM 树中，因此对其进行 appendChild 或 removeChild 均不会引起 reflow），最后再将 DocumentFragment 节点插入 DOM 树，这种方式大大降低了浏览器的开销（因为 DOM 树中每一次 DOM 节点的变化都可能引起 reflow 和 repaint，而这种“集中处理”的方式会有效减少这些操作的次数）。

 

使用示例

 

● var i = 100,

●       tmp = document.createDocumentFragment();

● while (i--) {

●       tmp.appendChild(document.createElement("div"));

● }

● document.body.appendChild(tmp);

 

兼容性

 

所有浏览器