JavaScript中的文档碎片 DocumentFragement-CSDN博客

JavaScript中的文档碎片 DocumentFragement

文档碎片是什么：

如果我们要在一个ul中添加100个li，如果不使用文档碎片，那么我们就需要使用append经常100次的追加，这会导致浏览器一直不停的渲染，是非常消耗资源的。但是如果我们使用文档碎片了，我们可以先将100个li添加到文档碎片中，然后直接把这个文档碎片追加到ul中即可。所以文档碎片其实就是一个临时的仓库。
如下代码在document.body中添加5个span：

for(var i=0;i<5;i++)
{ 
    var op = document.createElement("span"); 
    var oText = document.createTextNode(i); 
    op.appendChild(oText); 
    document.body.appendChild(op); 
} 
复制代码

对于少量的更新，一条条循环插入的运行也还可以。但是，当要向document中添加大量数据（比如1w条），如果像上面的代码一样，逐条添加节点，整个过程会十分缓慢，性能极差。也可以建一个新的节点，例如div，先将span添加到div上，然后再将div添加到body:

var oDiv = document.createElement("div"); 
for(var i=0;i<10000;i++)
{ 
    var op = document.createElement("span"); 
    var oText = document.createTextNode(i); 
    op.appendChild(oText); 
    oDiv.appendChild(op);  
} 
document.body.appendChild(oDiv); 
复制代码

但这样会在body中多添加一个div节点。用文档碎片就不会产生这种节点，引入createDocumentFragement()方法，它的作用是创建一个文档碎片，把要插入的新节点先插入它里面，然后再一次性地添加到document中。
代码如下：

//先创建文档碎片

var oFragmeng = document.createDocumentFragment(); 


for(var i=0;i<10000;i++)

{ 

    var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 

    //先附加在文档碎片中

    oFragmeng.appendChild(op);  

} 


//最后一次性添加到document中

document.body.appendChild(oFragmeng); 
复制代码