Javascript基準添加/刪除與編輯DOM？

可能重複：
What is better, appending new elements via DOM functions, or appending strings with HTML tags?Javascript基準添加/刪除與編輯DOM？

我需要改變千<div>的 - 只有兩個屬性。是否將「便宜」刪除/添加整個<div>，或者只是更改屬性？什麼是最便宜的方式來做到這一點與Javascript（沒有泄漏，儘可能少的GC）。

來源

2013-01-17 knutole

http://jsperf.com/ –

不錯，謝謝=） – knutole

如果我被迫猜測，我會說它可能更便宜，只是改變屬性 - 特別是如果它們是不會導致的屬性在視覺上的變化。 –

Test it在您的目標瀏覽器中，但考慮到更改的屬性通常不需要回流（顯然取決於屬性是什麼，它們如何影響樣式的應用等），並且不需要改變DOM節點之間的鏈接，我傾向於期望改變屬性更快。更換內容將需要拆除舊的DOM節點，創建新的，他們鉤住DOM ...

至於如何做到這一點，這取決於你如何識別的div了一點，但它的無論如何，這將是一個簡單的循環。例如，在任何現代的瀏覽器：

var divs = document.querySelectorAll("selector for the divs"); 
var index; 
var div; 
for (index = 0; index < divs.length; ++index) { 
    div = divs[index]; 
    div.setAttribute(/*...*/); 
    div.setAttribute(/*...*/); 
}

如果屬性被體現爲屬性，您可能需要使用反射屬性，而不是避免setAttribute函數調用。例如，div.id = "value";而不是div.setAttribute("id", "value");。但我敢打賭，這是過早的優化。

來源

2013-01-17 15:59:16

感謝您的好評！ – knutole

Javascript基準添加/刪除與編輯DOM？

回答

相關問題