DOM事件操作优化2——移除事件处理程序

上一篇博客中谈到使用事件委托技术操作DOM事件,减少事件处理程序对内存的占用,并且减少了DOM访问时间。极大的优化了性能。然而除了这种技术外,还可以通过“移除事件处理程序”来移除无用事件处理程序与元素的绑定从而释放内存达到内存重用的目的。

注意:事件就是用户或浏览器自身执行的某种动作,诸如click  mouseover  mouseenter……,都是事件的名字。而事件处理程序就是相应某个事件的函数,如onclick  onmouseover  onmouseenter……

1、为什么要移除无用的事件处理程序?

(1)每当事件处理程序指定给元素时,运行中的浏览器代码与支持页面交互的js代码之间就会建立一种连接,这种连接越多,页面执行起来就越慢。为了减轻浏览器的负担和优化页面性能,这时必须移除一些无用的事件处理程序。

(2)内存中有时会存在“空事件处理程序”,这也会对程序内存和性能造成影响。造成空事件处理程序一般有两种情况:

①从文档中移除带有事件处理程序的元素时,这可能是通过纯粹的DOM操作,例如使用removeChild()和replaceChild()方法,但更多的是发生在使用innerHTML替换页面中某一部分的时候——如果带有事件处理程序的元素被innerHTML被删除了,那么原来添加到元素中的事件处理程序极有可能无法被当作垃圾回收。(因为事件处理程序仍然与被删除的元素保持引用关系),有的浏览器(尤其是IE)在这种情况下很可能将对元素和事件处理程序的引用都保存在内存中。如果知道某个元素即将被移除,那么在移除该元素之前最好先手工移除绑定在该元素上的事件处理程序。这样就能确保内存可以被再次利用了。

②在卸载页面的时候,IE8及更早版本问题最多,其他浏览器也有一定问题。就是如果在页面被卸载之前没有清理干净事件处理程序,那它们就会滞留在内存中。每次加载完页面再卸载页面时,内存中滞留的对象数目就会增加,因为事件处理程序占用的内存没有被释放,最好的做法是:在页面卸载前,先通过onunload事件处理程序移除所有事件处理程序。(事件委托技术针对这种情况的优势在于:需要跟踪的事件处理程序越少,移除它们就越容易)

注意:使用onunload事件处理程序意味着不会被缓存在bcache中,如果开发者注意这个问题,只能在IE中通过onunload来移除事件处理程序了。



猜你喜欢

转载自blog.csdn.net/qq_36060786/article/details/79429766