createDocumentFragment学习

DocumentFragment：表示文档的一部分（或一段），更确切地说，它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。

DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。

不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。

可以用Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。

说明：添加多个dom元素时，先将元素append到DocumentFragment中，最后统一将DocumentFragment添加到页面。 该做法可以减少页面渲染dom元素的次数.

 

function ce(){
                var start_time = new Date();
                for(var i = 0; i<10000; i++){
                    var p = document.createElement('p');
                    document.body.appendChild(p);
                }
                var end_time = new Date();
                console.log(end_time.getTime() - start_time.getTime());
            }
            
            function frag(){
                var start_time = new Date(),
                frag = document.createDocumentFragment();
                for(var i = 0; i<10000 ; i++){
                    var p = document.createElement('p');
                    frag.appendChild(p);
                }
                document.body.appendChild(frag);
                var end_time = new Date();
                console.log(end_time.getTime() - start_time.getTime())            
            }

　　通过以上的代码测试了一遍，使用createDocumentFragment在append次数比较大的时候，性能确实有所提升。