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

但是,如果当我们要向document中添加大量数据时(比如1w条),如果像上面的代码一样,逐条添加节点,这个过程就可能会十分缓慢。

当然,你也可以建个新的节点,比如说div,先将oP添加到div上,然后再将div添加到body中.但这样要在body中多添加一个<div></div>.但文档碎片不会产生这种节点.

【js基础修炼之路】--创建文档碎片document.createDocumentFragment()
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); 
【js基础修炼之路】--创建文档碎片document.createDocumentFragment()

为了解决这个问题,我们可以引入createDocumentFragment()方法,它的作用是创建一个文档碎片,把要插入的新节点先附加在它上面,然后再一次性添加到document中。代码如下: 
代码如下:

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

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); 
【js基础修炼之路】--创建文档碎片document.createDocumentFragment()

经过测试,在ie,firefox下性能明显得以提高。大家可以自己测试下。 
前端性能优化都是从一些细节地方做起的,如果不加以注意,后果很严重。

上一篇:[软件工程基础]PhyLab 功能规格说明书


下一篇:vue-cli#2.0 webpack 配置分析