添加/删除与编辑DOM的Javascript基准测试？

Question

  

可能重复：
  What is better, appending new elements via DOM functions, or appending strings with HTML tags?

我需要改变一千<div>个 - 只有两个属性。删除/添加整个<div>或仅更改属性会“更便宜”吗？使用Javascript（没有泄漏，尽可能少的GC）这是最便宜的方法。

Answer 1

在您的目标浏览器中

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

如果属性反映为属性，您可能希望使用reflect属性来避免setAttribute函数调用。例如，div.id = "value";而不是div.setAttribute("id", "value");。但我敢打赌那是不成熟的优化。