Chrome Dev Tools

Question

kullanarak ayrılmış bir DOM ağacına başvuruda neyin kaynaklandığını öğreniyorum Müstakil bir DOM ağacında hangi değişkeni referans gösterdiğinizi tam olarak anlamaya çalışıyorum. Sorunu iki basit görünüme indirdim ve ayrılan düğümlere başvurmakta olanları bulmak için Chrome Dev Tools'u (karşılaştırma görünümünde) kullanmaya çalışıyorum. Ben dev araçları

alt kısmı HomeView ait el çözülmüş hale bir div yarattığını gösteriyor ... dev araçları bir görüntü ekledim. Ama oradan nereye gideceğime emin değilim.

Bellek sızıntılarını saptayarak bir yığın yığın taşması ve blog gönderilerini okudum, ancak yine de bunu anlayamıyorum. Omurganın özellikle bellek sızıntılarına neden olduğunu biliyorum, bu yüzden "zombi öldürme" tekniklerini uyguladım, ancak bellek sızıntısı hala var. İşte benim görüşlerim şunlardır:

Yardım Görünüm

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

Ana Görünüm

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

... ve sonra ben yönlendirici bir yöntemde her bir görünümün "yakın" yöntemini çağırın .. .

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

sızıntı canlı demo buradadır: http://bit.ly/15xPrW7. Kaçak tetikleme davranışı, iki sayfa arasında gezinmek için menüyü kullanır.

Herhangi bir yardım için teşekkür ederiz! Teşekkür ederim!

Answer 1

Ug coffeescript.

Bu arada, bellek sızıntısı her zaman size sayfa üzerinde jquery ile avlanma jquery dom önbelleğini devre dışı bırakmak gerekir. Bağlandığınız örnek site ile yaptığım kısa özette, gördüğüm kopuk düğümlerin bazılarının bu önbellekte olduğuna eminim.

$.expr.cacheLength = 1; 

Bu çok zayıf bir şekilde belgelenmiştir, ancak gerçek sızıntılarınızın nereden geldiğini bulmanızda yardımcı olmalıdır.