删除事件侦听器,jquery,内存泄漏和性能

时间:2015-01-13 23:30:34

标签: jquery memory bind event-listener unbind

在我的Web应用程序中,servlet根据业务规则生成动态html页面。我有一个容器div,它总是会重新生成并根据场景更新其内容。假设,首先我们添加一个按钮并在其上绑定一个监听器。之后,我们不需要该按钮,例如用文本字段替换容器内容。

事件监听器怎么样,为了防止内存泄漏和性能,我是否必须取消它们?

这是一个糟糕的设计,用html方法设置元素?使用dom或element创建jquery方法更好地生成元素吗?

目前的结构:

<div id="mainContent">
</div>

当我们添加按钮时:

$('#mainContent').html('<div id=button01></div><script>$('#button01').on('click', function() { //..;

之后,假设我们不需要按钮,然后添加文本字段。

在实际应用程序中,控件是通过解析json数组生成的 主要内容包含所需的控件。

如果我不需要示例button01,我是否必须拨打button01.off(&#39;点击&#39;

最好是手动删除监听器和按钮itselft,例如从dom?

聚苯乙烯。我使用jquery 2.x

1 个答案:

答案 0 :(得分:3)

  

事件监听器怎么样,我是否必须为它们取消它们   防止内存泄漏和性能?

只要您只使用jQuery方法来操作内容(例如示例中的.html()),那么jQuery将负责清理与删除的DOM元素相关联的任何项目,您不应该任何内存泄漏。

如果您使用jQuery添加事件处理程序或.data()项,则可能导致泄漏,但随后使用常规直接DOM操作来删除或替换元素。这可能会导致与事件处理程序关联的小内存泄漏,并且可能导致内存泄漏与您在这些元素上使用.data()时使用的内容大小成比例。虽然最好不要有这些泄漏,但泄漏仅在当前页面在屏幕上的持续时间内进行,因此除非您在页面生命周期内或存储期间定期执行此操作数十万次在.data()引用中的巨大事物,然后泄漏可能小到不重要。你应该仍然勤于正确地做事以避免泄漏,但通常不用担心。我发现你真正需要担心这些泄漏的唯一情况是你有一个很长的运行页面(例如可能需要几个小时),有很多重复的DOM操作,比如单页应用程序或者长时间播放的幻灯片。

  

这是一个糟糕的设计,用html方法设置元素?好点吗   用dom或element生成元素创建jquery方法?

使用.html()方法替换某些HTML是完全正确的,如果这是指定您想要完成的内容并且您想要更改整个树的最简单,最方便的方法。

有一次,当你想要改变/替换大型HTML树中的一个元素时,使用.html()的性能不佳时,不应该用.html()替换整个树,但是应该只针对您想要更改的单个元素。这是因为浏览器扔掉一大堆DOM元素然后用所有新的HTML元素替换它们更加昂贵,而你所做的就是改变那个部分中的一个元素。层次结构。

  

如果我不需要示例button01,我是否必须打电话   button01.off(&#39;单击&#39;

     

最好是手动删除监听器和按钮itselft   来自dom的例子?

如果要使用jQuery方法(例如jQuery&#39; s .remove())删除DOM元素(如按钮)并且不保留对它的引用,则不必手动删除事件处理程序。它们将获得jQuery清理过你。