zoukankan      html  css  js  c++  java
  • innerHTML属性的内存和性能问题

    使用innerHTML替换子节点可能会导致浏览器的内存占用问题,尤其是在IE中,问题更加明显。在删除带有时间处理程序或引用了其他js对象子树是,就有可能导致内存占用问题。假设某个元素有一个事件处理程序,在使用前某个属性将该该元素从文档树种删除后,元素与时间处理程序之间的绑定关系在内存中并没有一并删除。如果这种情况频繁出现,页面占用的内存数量就会明显增加。因此在使用innerHTML时,最好先手工删除要被替换的元素的所有事件处理程序.

    不过,使用innerHTML这个属性,仍然还是可以为我们提供很多便利的。一般来说,在插入大量新HTML标记时,使用innerHTML属性与通过多次DOM操作先创建节点再指定他们之间的关系相比,效率要高得多。这是因为在设置innerHTML时,就会创建一个html解析器。这个解析器是在浏览器级别的代码基础上运行的,因此比执行js快得多。不可避免地,创建和销毁html解析器也会带来性能损失,所以最好能够将创建innerHTML的次数控制在合理范围内。例如,下列代码使用innerHTML创建了很多列表项:

    for(var i=0,len=value.length;i<len;i++){
    
      ul.innerHTML+=”<li>”+value[i]+”</li>”; //避免这种频繁操作
    
    }
    

      

    这种每次循环都设置一次innerHTML的做法效率很低。而且,每次循环还要从innerHTML中读取一次信息,及以为这每次循环要访问两次innerHTML。最好的做法是单独构建字符串,然后在一次性地将结果字符串赋值给innerHTML,想这样:

    Var itemHtml=””;
    
    for(var i=0,len=value.length;i<len;i++){
    
      itemHtml+=”<li>”+value[i]+”</li>”; //避免这种频繁操作
    
    }
    
    ul.innerHTML=intemHtml;

     

    这个例子的效率高得多,因为它只对innerHTML执行了一次渎职操作。

     

  • 相关阅读:
    jquery的图片异步加载
    thinkphp3.1的验证码
    android的edittext设置输入限制,只能输入数字
    android,安卓get请求的提交以及我遇到的异常
    android安卓开发基础小笔记,添加按钮事件,打开新窗体,窗体传值,回传
    php正则表达式函数
    php对浮点数小数取整,php除法取整数
    php数组全排列,元素所有组合
    javascript数组全排列,数组元素所有组合
    spring 配置中相关属性的含义:
  • 原文地址:https://www.cnblogs.com/wangdan0915/p/8136332.html
Copyright © 2011-2022 走看看