美文网首页
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