javascript - 添加/删除与编辑 DOM 的 Javascript 基准？

Question

可能的重复：
通过 DOM 函数附加新元素或附加带有 HTML 标记的字符串，哪个更好？

我需要改变一千个<div>——只有两个属性。删除/添加整体会“便宜<div>” ，还是只更改属性？以及使用 Javascript 执行此操作的最便宜的方法是什么（没有泄漏，并且使用尽可能少的 GC）。

Answer 1

在您的目标浏览器中测试它，但考虑到更改属性通常不需要重排（显然取决于属性是什么，它们如何影响样式的应用方式等）并且不需要更改之间的链接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");. 但我敢打赌，这是过早的优化。