报错原因
前两天做一个用户列表的应用,右键用户头像弹出一个菜单选项。这应该是JavaScript最容易实现的一个功能的,使用JavaScript事件即可实现。但是测试的时候,其它浏览器都没有问题,唯独IE6报错:
这个问题,有点棘手。因为它不是单纯的JavaScript报错。因为用户列表是动态创建的,即可能有一个用户进入房间就在列表里增加一个用户,离开一个用户就从列表里删除这个用户,不好调试,我改成静态的测试。发现没有崩溃,也没有报错。
正在左思右想,感觉IE6容错性能很低,就怀疑是JavaScript动态创建绑定用户列表事件导致内存占用过多。因为用户列表是动态创建的,而绑定右键的方法是写在一个函数里。如:
function bind() {
var obj = document.getElementsByTagName('li')
for(var i = 0; i < obj.length; i++) {
obj[i].onclick = function () {
...
}
}
}
每当用户列表发生改变(删除、或者添加、或者重建)时就调用一次绑定函数,经过查找资料,发现是IE6对JavaScript内存释放的机制太落后导致。
比如我列表里有是个用户,并且已经绑定了右键侦听,然后我删除列表里这十个用户的DOM节点,在IE6里不会因为DOM节点删除而去自动释放侦听事件的资源,导致内存占用随着DOM节点的不断变化而越来越耗费内存资源,最终就报错崩溃。
解决方法
网上有人说,可以再删除DOM节点之前解除事件绑定在删除,这或许能解决。但我认为更有的方法是把事件写到标签里,如:
<button onclick="bind()">click</button>
这样的方式更好,删除DOM节点,事件也被释放了。
要么,你可以忽略IE6这种破烂的浏览器,一笑而过!