【js基础修炼之路】--建立文档碎片document.createDocumentFragment()

 

 

 

讲这个方法以前，咱们应该先了解下插入节点时浏览器会作什么。
         在浏览器中，咱们一旦把节点添加到document.body（或者其余节点）中，页面就会更新并反映出这个变化，对于少许的更新，一条条循环插入也会运行很好，也是咱们经常使用的方法。代码以下：    

 

 

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,先将oP添加到div上,而后再将div添加到body中.但这样要在body中多添加一个<div></div>.但文档碎片不会产生这种节点.

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); 

为了解决这个问题，咱们能够引入createDocumentFragment()方法，它的做用是建立一个文档碎片，把要插入的新节点先附加在它上面，而后再一次性添加到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); 

通过测试，在ie，firefox下性能明显得以提升。你们能够本身测试下。 
前端性能优化都是从一些细节地方作起的，若是不加以注意，后果很严重。