骨幹葉離散DOM元素，無論我如何刪除視圖

我很努力獲得單頁應用程序的內存管理的概念。這是我的代碼：骨幹葉離散DOM元素，無論我如何刪除視圖

var FilterModel = Backbone.Model.extend({}); 
    var taskView = Backbone.View.extend({ 
     template: _.template('<h1><%= title %></h1>'), 
     initialize: function(){ 
      this.render(); 
      this.listenTo(this.model, 'destroy', this.remove); 
      console.log(this.model) 
     }, 
     render: function(){ 

      this.$el.html(this.template(this.model.toJSON())); 
      return this; 
     }, 
     events:{ 
      'click h1': 'removeView' 

     }, 
     removeView: function(){ 
      this.model.destroy(); 
      console.log('removed'); 

     } 
    }); 
    var filterModel = new FilterModel({title: 'Test'}); 
    var taskview = new taskView({model:filterModel}); 

// I make heap snapshot before and after the change! 
    setTimeout(function(){ 
     $("h1").click()}, 3000 
    ) 
    $('body').append(taskview.$el);

我被大量的文章，使用「刪除」和「消滅」取出DOM樹時，將清理任何內存泄漏告訴。

但Chrome配置文件實用程序另有說明。無論我做什麼，我都會分離DOM元素。

UPDATE !!! 在響應嘗試了幾件事情後，我仍然得到這個谷歌瀏覽器：這裏的jsfiddle：http://jsfiddle.net/HUVHX/ enter image description here

來源

2014-04-16 Janck

@moo，我不確定你指的是什麼？ – Janck

@ muistooshort注意到他正在調用'this.model.destroy（）'並且該視圖正在偵聽觸發默認的'View＃remove'方法的銷燬事件 – ekeren

@ekeren：對，謝謝，沒有看到。 –

taskview仍然持有對this.el的強烈參考，儘管它沒有連接到dom。這不是一個內存泄漏，因爲taskview保持強還通過它的可變

爲了測試我的假設只需要添加：

removeView: function(){ 
    this.model.destroy(); 
    this.el = undefined; 
    this.$el = undefined; 
}

另一種方法是聯合國民主基金taskview VAR

編輯：

當我更改："click h1" : "removeView"到"click": "removeView"它解決了分離的DOM節點泄漏。

我懷疑這與jQuery選擇器緩存有關。

可以在主幹代碼中看到的，所不同的是在調用jQuery的on功能與選擇：

if (selector === '') { 
    this.$el.on(eventName, method); 
} else { 
    this.$el.on(eventName, selector, method); 
}

我試圖跟蹤緩存深入到jQuery代碼，沒有運氣。

來源

2014-04-16 14:28:56 ekeren

我試過這個，仍然得到相同的結果。（我更新了原始文章的截圖） – Janck

@Janck - 你可以在jsfiddle上發佈此代碼，所以我們可以深入瞭解 – ekeren

http://jsfiddle.net/HUVHX/ – Janck

所以Janck，您可以在這裏鰭答案： Backbone remove view and DOM nodes

的問題是，你必須做的不僅僅是刪除你的模型和視圖。

當您嘗試關閉視圖時，您需要正確銷燬所有掛起的事件和其他綁定。

我不知道你是否瞭解Marionette.js（Backbone.Marionette），但它是一個很大的擴展骨幹來處理這個殭屍視圖，創造強大的JS應用。

你可以閱讀一些關於這個的文章，他們被指向我發佈的Stackoverflow鏈接。

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

http://lostechies.com/derickbailey/2012/03/19/backbone-js-and-javascript-garbage-collection/

但邏輯是這樣的：如果視圖被監聽模式，那麼反之也會發生，所以你會一直在你的DOM讓您查看的實例。

來源

2014-04-16 11:51:25

謝謝你的迴應。我聽說過木偶，但我不確定需要多少努力來重新設計我的應用程序。我可以看到沒有快速解決方案，我必須採取不同的方法。您能否就我原來的問題發佈的代碼向我提供建議？我也嘗試在模型和視圖上使用「stopListening（）」，但它並沒有做到這一點。 – Janck

骨幹葉離散DOM元素，無論我如何刪除視圖

回答

相關問題