使用AngularJS / jQuery分离的DOM树

时间:2013-10-14 13:54:53

标签: jquery angularjs memory-leaks

所以我有一个非常简单的Angular应用程序,我试图弄清楚是什么原因导致分离的DOM树出现在chrome Profiler中。例如,当您加载此页面时:

http://rztest.nodejitsu.com/dashboard

我得到2个独立的DOM树,一个有2个条目,另一个有3个条目。这个页面不使用任何自定义指令,所以它必须是Angular或jQuery的东西,但是我只是看不到任何会导致这些分离的DOM树的东西。

问题变得更大(如果你点击项目链接并做另一个配置文件,那里有更多独立的DOM树和条目)所以我希望如果我能修复这个非常简单的例子,它会级联在整个申请的其余部分。

另请注意,我正在使用ui-router但是我已经尝试使用Angular的默认路由器同样的结果。即使是不使用jQuery的todomvc Angular应用程序(http://todomvc.com/architecture-examples/angularjs/#/)也已经分离了DOM树。

更新

我已经从应用程序中取出了jQuery,在我的简单页面上,除了一个独立的dom树之外的所有dom树都消失了(而且那个是来自AngularJS,我知道它在哪里)。当我尝试使用更复杂的页面时(使用带有templateUrl并进行转换的自定义指令),删除jQuery似乎没什么帮助。

我不确定jQuery是否是实际问题(或者可能是其中的一部分)或Angular如何使用jQuery / jqLit​​e。

有没有人知道jQuery 1.10.x中是否存在已知的分离DOM树?

1 个答案:

答案 0 :(得分:4)

我花了几个小时在许多大型AngularJS应用程序中调试DOM节点泄漏。

我发现很多分离的DOM元素都没有被收集,因为jQuery从它保留的一些内部缓存中引用了它们。我确信有一些Angular / jQuery问题在起作用。

不幸的是,我发现深入研究这个问题很快会创造出比答案更多的问题(例如,我注意到在我的应用程序中打开/关闭视图会导致分离的DOM元素......但重新打开/关闭不会创造更多) - 最后,我必须做出妥协:

When an element is destroyed, I would recursively remove that elements children from their parents.

我承认这是一个绝对的黑客 - 但结果是任何泄漏的DOM元素将不再保留大的子元素,因此内存泄漏将变得不那么重要。

如果你找不到解决这个问题的方法......这肯定有助于防止泄密。