刪除骨幹視圖但DOM節點數不斷增加？

我有一個在backboneJS中構建的測驗應用程序，我有三個視圖。 QuizView顯示整體進度和後退/下一個按鈕。包含一組問題和每個問題的QuestionView的PageView。刪除骨幹視圖但DOM節點數不斷增加？

當用戶轉到測驗的下一頁時，我通過調用一個調用Backbone的remove（）函數的頁面本身和所有問題來刪除當前的PageView。（所有聽衆都附帶listenTo）

這是我的期望，在我這樣做後，DOM節點不應該再反映在內存時間軸上。我附加了Chrome開發工具中DOM節點數的視圖，您可以看到它隨着您進入新頁面而增加。

我也拍了堆快照，當我查看分離的DOM項目時，它們都有一個項目（頁面的div容器），在保留樹中有一個項目。我假設這就是爲什麼他們沒有被收集。

任何人都可以提供洞察，爲什麼DOM節點數不斷增加？

而且這是我破壞功能瀏覽量：

destroy: function(){ 
    console.log("PageView :: destroy " + this) 
    _.each(this.childViews, function(view){ 
     view.remove(); 
    }); 

    this.remove(); 
}

Timeline View Heap Snapshot

來源

2013-05-09 smurfarita

只要你擁有他們將沒有資格進行垃圾回收的對象之間的任何引用。這些觀點是「殭屍觀點」。如何處理這類案件在這個職位是完全解釋說：

Zombies! RUN! (Managing Page Transitions In Backbone Apps)

通過

view.remove（）刪除從DOM視圖，並調用的stopListening到刪除視圖聽過的任何綁定事件。

您基本上刪除了events: {}和該視圖的DOM。然而，事件的trigger和模型事件監聽像

this.model.on('reset', this.render, this)

依然健在，而且持有參考您的視圖，使其無法進行垃圾回收。

來源

2013-05-10 07:05:14

這是有道理的，但是在我的「上」或「觸發」任何事件的情況下我不會用，所以我覺得默認的刪除功能應該是足夠的。 – smurfarita 2013-05-12 20:42:58

如果你有任何listenTo在你的視圖/集合/模型中，最好選擇'this.model.off（null，null，this）'或'this.collection.off（null，null，this）' – Muhaimin 2014-03-03 14:35:57

我知道這是一箇舊帖子，但我碰到了同樣的問題。 在chrome dev工具中記錄時，垃圾收集器不能運行。您必須通過單擊GC按鈕手動運行它。

Dev Tools GC Button

我建this fiddle創建節點，然後將它們全部刪除時創建10。認爲節點計數應該在從dom中移除時重置。它沒。然後我注意到頂部的GC按鈕...

猜你可以將演示注入到SO中。不需要小提琴。這很酷...

var test = document.getElementById("test"); 
 
var stuff = document.getElementById("stuff"); 
 

 
test.addEventListener("click", testFn); 
 

 
var count = 0; 
 

 
function testFn(){ 
 
    
 
    console.log('create '+count); 
 
    
 
    // create a new div element 
 
    // and give it some content 
 
    var newDiv = document.createElement("div"); 
 
    var newContent = document.createTextNode("test "+count); 
 
    count++; 
 
    
 
    newDiv.appendChild(newContent); //add the text node to the newly created div. 
 
    
 
    stuff.appendChild(newDiv); 
 
    
 
    if(count == 10){ 
 
     
 
     while (stuff.firstChild) { 
 
      stuff.removeChild(stuff.firstChild); 
 
     } \t \t \t 
 
     
 
     count = 0; 
 
     
 
    } \t 
 
    
 
};

<div id="test">page should start with 14 nodes. click me.</div> 
 
<div id="stuff">&nbsp;</div>

來源

2015-02-21 13:28:28

刪除骨幹視圖但DOM節點數不斷增加？

回答

相關問題