Javascript内存泄漏:分离的DOM树

Question

我注意到浏览器的内存在我处于一种形式时开始增加(这在任务管理器中很明显).在IE 9中,在使用一段时间后,这很容易超过500MB,而chrome则更具弹性(使用相同的测试可达到200MB).

我正在使用chrome开发人员工具来调试此问题.我注意到有大量的Detached DOM树:

我假设这可以确认存在内存泄漏.这是对的吗？其次,我需要找出如何确定问题的根本原因.我知道您应该使用保留树来识别阻止这些物品被回收的原因.但我无法找到如何使用保留树.例如,上面屏幕截图中的保留树是什么意思？

任何帮助将不胜感激.

Answer 1

编写引用DOM元素的代码时,请记住许多注意事项.但这一切基本上归结为几个简单点 -

一个.在您的本地功能中始终清除参考

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

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

C.尽量不要在闭包/内联处理程序中使用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!             
      }
    }

是的,人们可以争辩说,搜索元素可以减慢页面速度,但与性能影响相比,延迟是非常小的.在大型单页面应用程序中.因此,只有在权衡利弊后才能使用#3.(在我的案例中它确实有很大帮助)

UPDATE

d.避免使用匿名函数 - 在分析/查看堆快照时,命名事件处理程序和本地函数将对您有所帮助.