添加/删除与编辑 DOM 的 Javascript 基准？ [复制]答案

【问题标题】：Javascript benchmarks for adding/removing vs. editing DOM? [duplicate]添加/删除与编辑 DOM 的 Javascript 基准？ [复制]
【发布时间】：2013-01-17 15:55:35
【问题描述】：

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

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

【问题讨论】：

如果我不得不猜测，我会说只更改属性可能更便宜 - 特别是如果它们是不会导致视觉变化的属性。
@AnthonyGrist 他们会做出视觉上的改变。我会尝试自己进行基准测试。
我前段时间问了一个类似的问题：stackoverflow.com/questions/8461851/…
更改属性显然快了 4%
我已经回答了一个关于以很少的延迟更新许多 DOM 元素的问题。 sourcoder.blogspot.ca/2012/12/chunk-processing-array.html你可能有兴趣查看我后来写的关于它的帖子。

标签： javascript dom benchmarking

【解决方案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(/*...*/);
}

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

【讨论】：

感谢您的精彩回答！