DocumentFragment不是dom树的一部分,它的改变不会引起dom树的repaint和reflow,继承自Node类,任何Node接口类的方法都可以使用,作用主要是用来存储临时的节点来准备添加到文档中
nodeType = 11
nodeName = document-fragment
nodeValue = null
parentNode = null
- 特点:
- 并不属于dom结构的一部分,所以任何对DocumentFragment的操作,都不会引起repaint或者reflow
- appendChild insertBefore replaceChild等传入一个DocumentFragment的时候,是将DocumentFragment所有的子节点一次性操作
- 当我们给DocumentFragment插入到别的节点时候,DocumentFragment中的子节点都会被清空
- 当我们把现有dom上的一个节点插入给DocumentFragment,这个节点会从dom树上被删除
总结:DocumentFragment在操作上能提高优化性能,每一次都dom节点的操作都不会引起repaint或者reflow,在操作完自身后,会自动清空自己,不占据内存
var list = document.getElementById("list");
var fragment = document.createDocumentFragment();
for(var i = 0;i < 100; i++){
var li = document.createElement("li");
li.textContent = i;
fragment.appendChild(li);
}
list.appendChild(fragment);
网友评论