JS性能优化之文档碎片-document.createDocumentFragment

雨点打透心脏的1/2处 2021-09-12 07:44 286阅读 0赞

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

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

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

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

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

//先创建文档碎片
    
    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);

![复制代码][copycode.gif]

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

PS：这个优化跟循环添加html代码有点类似。

[copycode.gif]: /images/20210813/9717a5aae5e746eab51270a4713f817e.png