我正在尝试弄清楚如何准确获取哪个变量引用了分离的 DOM 树中的某些内容。我已将问题隔离为两个简单的 View ，并且我正在尝试使用 Chrome 开发工具(在比较 View 中)找出引用分离节点的内容。我附上了一张开发工具的图片……

开发工具的底部显示 HomeView 的 el 已经创建了一个分离的 div。但我不确定从那里去哪里。

我已经阅读了一堆关于查明内存泄漏的堆栈溢出帖子和博客帖子，但我仍然无法弄清楚这一点。我知道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);

...然后我在路由器的方法中调用每个 View 的“关闭”方法...

  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 . 泄漏触发行为是使用菜单在两个页面之间导航。

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

最佳答案

Ug CoffeeScript 。

除此之外，任何时候当您在页面上使用 jquery 查找内存泄漏时，您都需要禁用 jquery dom 缓存。在我对您链接到的示例网站的简要介绍中，我很确定我看到的一些分离节点在该缓存中。

$.expr.cacheLength = 1;

这方面的记录非常少，但应该可以帮助您找出实际泄漏的来源。

关于javascript - 如何使用 Chrome 开发工具找出引用分离的 DOM 树的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17758734/