Javascript 内存泄漏 : Detached DOM tree

Question

我注意到当我处于表单中时浏览器的内存开始增加(这在任务管理器中很明显)。在 IE 9 中，经过一些使用后，这很容易超过 500MB，而 chrome 更有弹性(使用相同的测试达到 200MB)。

我正在使用 chrome 开发者工具来调试这个问题。我注意到有大量的 Detached DOM 树:

我假设这可以确认存在内存泄漏。那是正确的吗？其次，我需要找出如何确定问题的根本原因。我知道您应该使用保留树来确定是什么阻止了这些项目被回收。但是我找不到如何使用保留树。比如上面截图中的retaining tree是什么意思？

如有任何帮助，我们将不胜感激。

Answer 1

在编写引用 DOM 元素的代码时，需要牢记许多注意事项。但这基本上可以归结为几个简单的要点 -

一个。在您的本地函数中，始终清除引用

var menu = $('body #menu');
// do something with menu
 .
 .
 .
 menu = null;

永远不要将引用存储为元素数据的一部分 .data()

尽量不要在闭包/内联处理程序中使用 DOM 引用，而是传递标识符

    function attachClick(){
      var someDiv = $('#someDiv');

      someDiv.click(function(){
         var a = someDiv....;
         //Wrong. Instead of doing this..
      });


      someDiv.click(function(){
         var a = $('#someDiv');
         //Pass the identifier/selector and then use it to find the element
      });       


      var myFunc = function(){
         var a = someDiv;
         //using a variable from outside scope here - big DON'T!             
      }
    }

是的，有人可能会争辩说搜索元素会减慢页面速度，但与性能命中巨大的堆导致 esp 相比，延迟非常小。在大型单页应用程序中。因此，只有在权衡利弊后才应使用#3。 (对我来说确实有很大帮助)

更新

避免匿名函数 - 命名您的事件处理程序和本地函数将在分析/查看堆快照时帮助您很多。