innerHTML属性的内存和性能问题

时间:2023-12-13 13:54:02

使用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=,len=value.length;i<len;i++){

  itemHtml+=”<li>”+value[i]+”</li>”; //避免这种频繁操作

}

ul.innerHTML=intemHtml;

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