javascript - 如何在考虑最高性能的情况下将包含许多节点的 HTML 字符串直接附加到现有 DOM 元素？

Question

我的问题是，是否有人对如何将包含许多节点的 HTML 字符串直接附加到现有 DOM 元素有任何想法，同时考虑到最高性能。

让我解释一下我在做什么。我正在创建一个 javascript 模板脚本。现在它的速度非常快。我能够在 3 秒多一点的时间内将 JSON 中的 40,000 个多数组项作为 html 节点渲染到 DOM 中(在 OSX macbook pro 上运行的 Chrome 16)。

解析字符串后，我通过 .innerHTML 将其插入新创建的 span 标记，然后将该 span 标记附加到 DOM。它该死的快速、高效和圆滑，但该死的，它就是行不通。为什么？因为它用一个无关的标签包裹了节点，这在某些情况下无疑会干扰 CSS，谁知道还有什么。因此，我需要能够将多个新创建的 DOM 节点直接附加到现有 HTML 标记下。

所以我从附加 span 标签(连同通过 innerHTML 分配的所有 html)切换到循环遍历该 span 的每个子节点并将它们分开附加。但是，伙计，它慢得多吗!呈现 40,000 个条目几乎需要 20 秒，而不是 3 秒。

而且我正在为这个特定项目避开 jquery。而且，不，我从没想过在现实世界的情况下会将 40,000 个项目呈现到一个页面上。我只是这样做来测试速度。我希望脚本绝对尽可能快。

Answer 1

使用 document.createDocumentFragment()。 (文件: msdn , mdn )

var span = document.createElement("span");
span.innerHTML = html;
var frag = document.createDocumentFragment();
while (span.childNodes.length) {
    frag.appendChild(span.childNodes[0]);
}
document.body.appendChild(frag);

阅读 John Resig(jQuery 和 Sizzle 的作者)对 performance improvements from using document.createDocumentFragment() 的看法.

---

IE 支持 element.removeNode(false)，它将元素从 DOM 中移除，将其子节点留在 DOM 中。但这对其他浏览器没有多大帮助。