zoukankan      html  css  js  c++  java
  • 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下性能明显得以提高。大家可以自己测试下。 
    前端性能优化都是从一些细节地方做起的,如果不加以注意,后果很严重。

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

  • 相关阅读:
    Python爬虫框架Scrapy
    继承
    c/c++面试题(7)零碎知识总结
    Linux网络编程(多人在线聊天系统)
    第一章 计算机系统漫游
    Linux网络编程(简单的时间获取服务器)
    虚函数(1)
    c/c++面试题(9)linux方向
    Linux网络编程的一般步骤(1)
    进程/线程介绍
  • 原文地址:https://www.cnblogs.com/leejersey/p/3516603.html
Copyright © 2011-2022 走看看