jquery - 使用 AngularJS/jQuery 分离 DOM 树

Question

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

我得到 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/jqLite。

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

score 4 · Accepted Answer

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

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

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

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

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

如果您没有找到解决此问题的方法……这肯定有助于将泄漏保持在某种控制之下。

1 回答 1