在DOM中添加/删除多个元素的最快方法

Question

编辑：这不是“最快的DOM插入”的重复，因为它还包括事件监听器变量。无论如何，我会编辑问题。

如果有人已经发现，我想知道一些事情。

我想知道在JavaScript中添加元素的最快方法，并且与ie6+、chrome10+、firefox2+兼容。

最快技术：

1. 添加单个元素
2. 添加100个元素

3. 添加1个元素或1000个元素的任何时间曲线

4. 同上，但用于删除元素

5. 添加/更改/删除内联样式属性

6. 添加像mousedown/mouseup/mouseover这样的事件监听器

7. 添加/删除某些标记是否比其他标记更快？例如：添加/删除<div>还是<p>更快？（在添加模式下：我认为<p>更快，因为它只有1个字母，而<div>可能是一个容器。我不知道，所以我在问:D）

   1. 删除元素，以某种方式保存到js中，然后重新添加它并保持事件监听器与删除元素之前相同

这是一个大问题，所以如果您只知道其中一些问题，您可以随时分享您所知道的内容；）

非常感谢！

- Totty.js

---

可能是最快的DOM插入的重复问题。 - ajreal

可能是重复的问题，参考 如何在 JavaScript 中从数组中删除特定元素？ - TylerH

Answer 1

1. 将父元素的 innerHTML 值设置为包含新元素 HTML 的字符串。
2. 和 1 相同。
4. 将父元素的 innerHTML 值设置为空字符串。
7.1 调用 Node.removeChild()，保存返回的 Node 对象，然后将该节点传递给 Node.appendChild()。

- clarkb86

---

我发现了这个链接，很好奇为什么在ie7、8、9中dom+innerHTML+fragment更快，在chrome中dom+fragment更快... http://andrew.hedges.name/blog/2008/04/19/innerhtml-versus-the-dom-cant-we-all-just-get-along - Totty.js

当您将大量元素插入文档时，更改 innerHTML 的值比操作 DOM 要快得多。 - clarkb86

那为什么在这些测试中不是这样呢？你是对的，它应该更快，但时间并不像这样。 - Totty.js

你尝试过替换默认代码，使其插入几百个元素吗？我试过了，并且它显示替换 innerHTML 更快（使用 Firefox 8.0a1）。 - clarkb86

当然，使用innerHTML的那个更快：它只使用了innerHTML，而后者则同时使用了innerHTML和DOM。 - Totty.js

Answer 2

Google/SO 是您的好朋友：

例如，对于 1/2 题的问题，请参见 Fastest DOM insertion。

我认为您可以搜索到很多相关信息。

除了 Google/SO 之外，在 jsperf 上也可以进行性能比较搜索：http://jsperf.com/browse 和 http://jsperf.com/popular。我相信您会在那里找到很多关于您问题的答案。如果您有一些未解答的问题，您也可以在主页面 http://jsperf.com/ 进行测试。

- Py.

---

所有的链接都已失效。 - Professor of programming