主干删除视图和 DOM 节点答案

【问题标题】：Backbone remove view and DOM nodes主干删除视图和 DOM 节点
【发布时间】：2012-07-20 08:09:00
【问题描述】：

所以我注意到我的应用程序在经过长时间使用后变慢了。特别是当我创建许多视图时，这些视图都是长列表中的每个项目。我原以为通过使用 view.remove() 删除这些视图将有助于解决问题，但是当它们从页面中删除时，我注意到 Chrome 的时间轴显示我的 DOM 节点数没有减少。我添加的每个视图都会继续增加这个数量。事实上，似乎唯一能减少此节点数的就是页面刷新。

这对我来说感觉不对，我觉得我搞砸了一些非常基本的东西，因为问题似乎出现在我所有的观点中，而不仅仅是这些观点。这些视图列表的发生速度要快得多，因为它们太多了。

有人对我应该寻找什么有任何建议吗？什么样的原因会导致这种行为？

我会提供代码，但我不知道有什么帮助。

TL;DR - View.remove() 正在从页面中删除视图，但我的 DOM 节点计数继续上升，并且永远不会下降。

【问题讨论】：

您是否检查过这是否可以在其他浏览器中重现？可能是 chrome 的网络检查器上的错误。少于 1200 个 Dom 节点是完全可以的，当它超过时，您必须检查哪些视图没有显示并立即删除它们
您的视图是否在监听任何模型或集合事件？这可能会导致视图中的this.el 和this.$el 泄漏。
@Deeptechtons 我希望我能说这是 Chrome 检查器的问题，但我很确定最薄弱的环节就在这台计算机前面。 ;-) 需要注意的是，我认为我应该澄清我的 DOM 元素正在被删除。 document.getElementsByTagName("*").length 之类的东西会根据我是添加还是删除视图而导致适当的计数更改。我使用 Derick Bailey 的僵尸移除思想，每个视图都有一个 close 功能，可以成功移除和取消绑定事件。所以我的事件下降了，观点消失了（至少在表面上）。但节点数仍然存在。
@muistooshort 是的。我的各种观点确实听模型和集合。我还有一个扩展的 close() 方法，它同时调用 remove() 和 onClose()。 onClose() 基本上具有所有 unbind('event') 操作来撤消我对各种模型和集合所做的任何绑定。但是您能否详细说明一下您对通过 this.el/$el 进行泄漏的含义？
如果视图仍在侦听模型，则模型具有对视图的引用，视图将在其 el 和 $el 属性中引用 DOM 元素。这意味着模型对元素有间接引用，并且您有僵尸。

标签： javascript jquery dom backbone.js

【解决方案1】：

由于未正确清理视图而导致内存泄漏。

阅读：http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

还有这个：http://lostechies.com/derickbailey/2012/03/19/backbone-js-and-javascript-garbage-collection/

您需要做的不仅仅是针对您的观点致电.remove()。当您尝试关闭视图时，您需要正确销毁所有挂起的事件和其他绑定。一种常见的方法是在视图上提供close 方法，我在第一篇文章中对此进行了描述。

请务必阅读 Johnny Oshika 在第一篇文章中的评论。它指出了实现事件清理的好方法。

【讨论】：

感谢您的回答，但我认为 mu 在 cmets 中解决了我的问题。实际上，我在讨论中什至提到了你和你的僵尸技术。 :-) 在这种情况下解决这个问题的礼仪是什么？我没有阅读你链接的垃圾收集文章，所以它很有用，就像你所有的帖子一样。