2016-05-07 154 views
1
元素的最高效的去除

假設下面的標記:最安全的,與兒童

<div id="outterParent"> 
    <div id="innerParent"> 
     <div class="children"></div> 
     <div class="children"></div> 
     <div class="children"></div> 
    </div> 
</div> 

在安全性(避免內存泄漏)和性能方面,是確定做這樣的事情:

var outterParent = document.getElementById("outterParent"); 
var innerParent = document.getElementById("innerParent"); 

outterParent.removeChild(innerParent); 

outterParent = innerParent = null; 

...或者是它更好地去除#innerParent之前每個.children元件移除,如下所示:

var outterParent = document.getElementById("outterParent"); 
var innerParent = document.getElementById("innerParent"); 
var child; 

while (innerParent.firstChild){ 
    child = innerParent.firstChild; 

    innerParent.removeChild(child); 
} 

outterParent.removeChild(innerParent); 

outterParent = innerParent = child = null; 
+0

您的瀏覽器有開發工具(廓線),您可以衡量這一點。例如。 https://developers.google.com/web/tools/chrome-devtools/profile/?hl=zh-CN –

+0

@FelixKling我正在爲iOS開發,所以Chrome並沒有真正幫助我,但是,那裏_must_是一個最佳做法。 – West1

+0

Safari也有開發者工具;) –

回答

1

這取決於。如果您在某個地方引用了某個孩子,並且未將其刪除,則父代不能進行垃圾收集。

var child = document.querySelector('children'); 
document.getElementById("innerParent").remove(); 
child.parentNode; // #innerParent -> it can't be garbage collected 

所以那麼這將是更好地抵消孩子的參考,或刪除子:

var child = document.querySelector('children'); 
document.getElementById("innerParent").remove(); 
child.remove(); 
child.parentNode; // null -> #innerParent might be garbage collected 
+0

我不認爲這真的回答了我的問題。我們假設沒有未完成的對子元素的引用。問題是這樣的:當刪除元素A時,最好的做法是先刪除元素A的children_,或者刪除元素A是否正確? – West1

+0

@ West1如果您沒有提及兒童,我不認爲有必要將其刪除。垃圾收集者應該足夠聰明以將其全部移除。但是,這當然是依賴於實現的。 – Oriol