Come scoprire che cosa fa riferimento a un albero DOM distaccato utilizzando Chrome Dev Tools

Question

Sto cercando di capire esattamente come ottenere quale variabile fa riferimento a qualcosa in un albero DOM distaccato. Ho isolato il problema fino a due semplici viste e sto cercando di utilizzare Chrome Dev Tools (nella vista di confronto) per scoprire cosa sta facendo riferimento ai nodi separati. Ho allegato un'immagine di strumenti di sviluppo ...

La parte inferiore di strumenti di sviluppo mostra che el di HomeView ha creato un div che si è staccato. Ma non sono sicuro di dove andare da lì.

Ho letto un sacco di post di overflow dello stack e post di blog per individuare le perdite di memoria, ma non riesco ancora a capirlo. So che Backbone ha maggiori probabilità di causare perdite di memoria, quindi ho implementato le tecniche di "uccisione degli zombi", ma la perdita di memoria è ancora lì. Qui ci sono le mie opinioni:

Aiuto Visualizza

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

Casa Vista

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

... e poi io chiamo il "chiudere" il metodo di ogni vista in un metodo nel mio router .. .

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

una dimostrazione dal vivo della fuga di notizie è qui: http://bit.ly/15xPrW7. Il comportamento di rilascio di perdite sta utilizzando il menu per navigare tra le due pagine.

Qualsiasi aiuto sarebbe apprezzato! Grazie!

Answer 1

Ug coffeescript.

A parte questo, ogni volta che si ricerca una perdita di memoria con jquery nella pagina, è necessario disabilitare la cache di jquery dom. Nella mia breve esperienza con il sito di esempio a cui sei collegato, sono abbastanza sicuro che alcuni dei nodi staccati che sto vedendo si trovino in quella cache.

$.expr.cacheLength = 1; 

Questo è molto scarsamente documentato, ma dovrebbe aiutarti a trovare da dove vengono le tue perdite effettive.