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

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

}

ul.innerHTML=intemHtml;

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

巴特西

innerHTML属性的内存和性能问题

最新文章

热门文章