Jak znaleźć odwołanie do odłączonego drzewa DOM za pomocą Narzędzi do Chrome Chrome

Question

Próbuję dowiedzieć się dokładnie, jak uzyskać, która zmienna odwołuje się do czegoś w odłączonym drzewie DOM. Problem został już ograniczony do dwóch prostych odsłon. Próbuję użyć Narzędzi deweloperskich Chrome (w widoku porównawczym), aby dowiedzieć się, co się odnosi do odłączonych węzłów. Mam załączeniu obraz dev narzędzi ...

Dolna część narzędzi dev pokazuje, że el z HomeView stworzył div że odpadła. Ale nie jestem pewien, dokąd się udać.

Przeczytałem kilka stosów przepełnienia stosu i postów na blogu dotyczących wykrywania wycieków pamięci, ale nadal nie mogę wymyślić tego. Wiem, że kręgosłup jest szczególnie narażony na przecieki pamięci, więc wdrożyłem techniki "zabijania zombie", ale wyciek pamięci nadal istnieje. Oto moje poglądy:

Pomoc Zobacz

// 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); 

główna Zobacz

// 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); 

... a ja nazywam „Zamknij” metodę każdego widoku w sposobie w moim routerze ..

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(); 
    } 
    }; 

Demo na żywo z wycieku jest tutaj: http://bit.ly/15xPrW7. Zachowanie polegające na wyzwalaniu przecieków używa menu do nawigacji pomiędzy dwiema stronami.

Każda pomoc zostanie doceniona! Dziękuję Ci!

Answer 1

Ug coffeescript.

Poza tym, za każdym razem, gdy polujesz na wycieki pamięci za pomocą jquery na stronie, musisz wyłączyć pamięć podręczną jquery dom. W mojej krótkiej grze z przykładową witryną, z którą się łączyłeś, jestem pewien, że niektóre z odłączonych węzłów, które widzę, znajdują się w tej pamięci podręcznej.

$.expr.cacheLength = 1; 

Jest to bardzo słabo udokumentowane, ale powinno pomóc w znalezieniu miejsca, z którego pochodzą rzeczywiste wycieki.