使用 AngularJS/jQuery 分离 DOM 树答案

【问题标题】：Detached DOM tree with AngularJS/jQuery使用 AngularJS/jQuery 分离 DOM 树
【发布时间】：2013-10-22 02:47:27
【问题描述】：

所以我有一个非常简单的 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/jqLite。

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

【问题讨论】：

我在 Chrome 中调试内存时遇到过几次问题，如果您在启动浏览器时关闭 JS 优化，这些 DOM 树是否仍然留在此处？使用命令chrome --js-flags="--nocrankshaft --noopt"。我试图为这些标志找到一个合理的来源，Karma Chrome Launcher 是我能找到的最好的。
是的，他们仍然出现
分离的 dom 节点是否可能本质上是 angular.element() 实例附加到由指令创建的私有 var 上？假设您有一个带有模板的指令。 Angular 将创建一个 angular.element 并将其注入到链接函数中。该编译的模板被缓存以在下一个链接函数执行时重新使用。在我看来，对于大多数指令来说，至少会有一个分离的 dom 节点。也许您可以包含更多详细信息，以准确显示您何时遇到此问题以及您希望哪些节点被垃圾收集。
看看这个信息是否有帮助Finding JS memory leak in chrome dev tools

标签： jquery angularjs memory-leaks

【解决方案1】：

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

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

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

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

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

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

【讨论】：