jquery - 使用 AngularJS/jQuery 分离 DOM 树

Question

所以我有一个非常简单的 Angular 应用程序，我试图找出导致分离的 DOM 树出现在 chrome 分析器中的原因。例如，当您加载此页面时:

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 树之外的所有树都消失了(那棵树来自 AngularJS，我知道它在哪里)。当我尝试创建更复杂的页面(使用具有 templateUrl 并执行嵌入的自定义指令)时，删除 jQuery 似乎没有帮助。

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

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

Answer 1

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

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

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

当一个元素被销毁时，我会递归地从其父元素中删除该元素的子元素。

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

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