如何使用Chrome开发工具找出引用分离的DOM树的内容

Question

我正在试图弄清楚如何在一个独立的DOM树中引用哪些变量.我已经将问题分解为两个简单的视图,我正在尝试使用Chrome Dev Tools(在比较视图中)来找出引用分离节点的内容.我附上了开发工具的图片......

的开发工具的底部显示el的HomeView创造,成为分离的股利.但我不知道从那里去哪里.

我已经阅读了一堆堆栈溢出帖子和博客文章,精确定位内存泄漏,但我仍然无法弄清楚这一点.我知道Backbone特别容易导致内存泄漏,所以我实现了"僵尸杀戮"技术,但内存泄漏仍然存在.以下是我的观点:

帮助查看

    // Generated by CoffeeScript 1.6.3
    (function() {
      var __hasProp = {}.hasOwnProperty,
        __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

      define(['jquery', 'jquerymobile', 'underscore', 'backbone'], function($, Mobile, _, Backbone) {
        var HelpView, _ref;
        return HelpView = (function(_super) {
          __extends(HelpView, _super);

          function HelpView() {
            _ref = HelpView.__super__.constructor.apply(this, arguments);
            return _ref;
          }

          HelpView.prototype.initialize = function() {
            return _.bindAll(this, "render", "jqdisplay", "close");
          };

          HelpView.prototype.render = function() {
            $(this.el).html("Help View");
            return this;
          };

          HelpView.prototype.jqdisplay = function() {};

          HelpView.prototype.close = function() {
            console.log('THIS', this);
            console.log($(this.el)[0].parentNode);
            $(this.el)[0].parentNode.removeChild($(this.el)[0]);
            this.undelegateEvents();
            $(this.el).removeData().unbind();
            this.remove();
            this.unbind();
            Backbone.View.prototype.remove.call(this);
            return delete this;
          };

          return HelpView;

        })(Backbone.View);
      });

    }).call(this);

家庭观点

    // Generated by CoffeeScript 1.6.3
    (function() {
      var __hasProp = {}.hasOwnProperty,
        __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

      define(['jquery', 'jquerymobile', 'underscore', 'backbone'], function($, Mobile, _, Backbone) {
        var HomeView, _ref;
        return HomeView = (function(_super) {
          __extends(HomeView, _super);

          function HomeView() {
            _ref = HomeView.__super__.constructor.apply(this, arguments);
            return _ref;
          }

          HomeView.prototype.initialize = function() {
            return _.bindAll(this, "render", "jqdisplay", "close");
          };

          HomeView.prototype.render = function() {
            $(this.el).html("Home View");
            return this;
          };

          HomeView.prototype.jqdisplay = function() {};

          HomeView.prototype.close = function() {
            console.log('THIS', this);
            console.log($(this.el)[0].parentNode);
            $(this.el)[0].parentNode.removeChild($(this.el)[0]);
            this.undelegateEvents();
            $(this.el).removeData().unbind();
            this.remove();
            this.unbind();
            Backbone.View.prototype.remove.call(this);
            return delete this;
          };

          return HomeView;

        })(Backbone.View);
      });

    }).call(this);

...然后我在路由器中的方法中调用每个视图的"关闭"方法...

  MyRouter.prototype.showView = function(view) {
    console.log('THIS', this);
    console.log("next view", view);
    console.log(this.currentView);
    if (this.currentView) {
      console.log('closing the current view...', this.currentView);
      console.log('starting', $('[data-role="content"]').html());
      this.currentView.close();
      delete this.currentView;
      console.log('remaining', $('[data-role="content"]').html());
      console.log('should be empty', this.currentView);
    }
    this.currentView = view;
    this.currentView.render();
    $('[data-role="content"]').html(this.currentView.el);
    if (this.currentView.jqdisplay) {
      return this.currentView.jqdisplay();
    }
  };

泄漏的现场演示在这里:http://bit.ly/15xPrW7.泄漏触发行为是使用菜单在两个页面之间导航.

任何帮助,将不胜感激!谢谢!

Answer 1

Ug coffeescript.

除此之外,只要你在页面上使用jquery进行内存泄漏搜索,就需要禁用jquery dom缓存.在我与您链接的示例站点的简短介绍中,我非常确定我看到的一些分离节点位于该缓存中.

$.expr.cacheLength = 1;

这是非常糟糕的文件,但应该帮助你找到你的实际泄漏来自哪里.