美文网首页
document.createDocumentFragment

document.createDocumentFragment

作者: 蘑菇酱960903 | 来源:发表于2018-04-16 13:46 被阅读0次

DocumentFragment不是dom树的一部分,它的改变不会引起dom树的repaint和reflow,继承自Node类,任何Node接口类的方法都可以使用,作用主要是用来存储临时的节点来准备添加到文档中
nodeType = 11
nodeName = document-fragment
nodeValue = null
parentNode = null

  • 特点:
  1. 并不属于dom结构的一部分,所以任何对DocumentFragment的操作,都不会引起repaint或者reflow
  2. appendChild insertBefore replaceChild等传入一个DocumentFragment的时候,是将DocumentFragment所有的子节点一次性操作
  3. 当我们给DocumentFragment插入到别的节点时候,DocumentFragment中的子节点都会被清空
  4. 当我们把现有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);

相关文章

网友评论

      本文标题:document.createDocumentFragment

      本文链接:https://www.haomeiwen.com/subject/mqpskftx.html