DocumentFragments

Posted 2020-10-22 wlgz

var fragment = document.createDocumentFragment();

　　引用mdn的描述：fragment是一个空文档对象DocumentFragment对象的引用。

 

　　常用在保存生成的dom节点上：

循环生成节点并插入dom中
    var box = document.getElementById("box");

    for(var i=0; i<10; i++) {
       var div = document.createElement("div");
       box.appendChild(div);          
    }

　　上面这种写法每次生成的dom节点再插入dom中，都会引起页面的重排，耗费性能。

 

　　下面用DocumentFragments改进：

    var box = document.getElementById("box"),
          fragment = document.createDocumentFragment();
    
    for(var i=0; i<10; i++) {
       var div = document.createElement("div");
       fragment.appendChild(div);          
    }

    box.appendChild(fragment);

　　

　　因为生成fragment(文档片段)存在于内存中，并不在Dom树中，所以将子元素插入到文档片段时不会引起页面重排。

　　documentFragment被所有主流浏览器支持