使用AngularJS/jQuery分离的DOM树

Question

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

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

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

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

UPDATE

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

我不确定jQuery是否是实际问题(或者可能是它的一部分)或者Angular是如何使用jQuery/jqLite的.

有谁知道jQuery 1.10.x中是否存在已知的分离DOM树？

Answer 1

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

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

不幸的是，我发现深入研究这个问题很快会产生更多的问题而不是答案（例如，我注意到在我的应用程序中打开/关闭视图会导致分离的 DOM 元素......但重新打开/关闭不会创建任何更多） - 最后，我不得不做出妥协：

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

我承认这绝对是一种黑客行为 - 但结果是任何泄漏的 DOM 元素将不再保留大型元素子树，因此内存泄漏将不再是一个问题。

如果您找不到解决此问题的方法...这肯定有助于将泄漏置于某种控制之下。