javascript dom插入。性能与泄漏？

我想知道插入复杂元素的dom的正确方法是什么

到目前为止，（使用jQuery）我通常首先构建元素，并在完成后插入它。我认为这是最有效的，因为DOM访问在性能方面代价高昂

但是对于原生js，我了解到为了避免内存泄漏，每个新的dom节点都应该在创建后立即插入到dom中

我们的内部网说：

Dom插入顺序 注意DOM插入顺序：在根元素本身附加到DOM之前，决不要将子元素附加到根元素

var root = document.createElement("DIV");
var child = document.createElement("DIV");

// THIS IS WRONG

root.appendChild(child);
document.body.appendChild(root);

// THIS IS CORRECT

document.body.appendChild(root);
root.appendChild(child);

我在网上找到了这个页面，它基本上解释了相同的事情（在交叉页面泄漏部分下）：

这是否意味着性能和泄漏预防之间存在对立

---

在插入新的DOM元素之前，是否应该将其作为字符串创建和操作？js库是如何解决这个问题的？DocumentFragments是奇迹般的解决方案吗？

根据yui网站上的介绍，使用innerHTML='html here'是插入html最有效的方法。这是因为浏览器经过了优化，可以非常快速地解析HTML，而DOM作为一种标准，被认为是有缺陷的，并且在IE等浏览器中执行得不正确

---

因此，为了快速，innerHTML是一种方法，我不认为它们是内存泄漏，因为它是用于解析html并在加载时呈现页面的同一个引擎。

在将子项插入文档之前将其插入父项中没有什么错。这是首选方式（如您所建议的，出于性能原因）

您指定的链接表明它会导致泄漏，但我从未听说过。他们没有很好地解释它为什么会泄漏

---

如果它真的泄漏了，它肯定只会在IE6中泄漏，我建议你忽略这一点，因为它的市场份额在不断缩小。防止IE6中的泄漏可能是一项困难的工作，而且不值得。您引用的建议几乎肯定是受到IE团队成员撰写的一篇文章的启发，该文章涉及“DOM插入顺序泄漏模型”。 有两点值得注意：

这篇文章是在2005年写的，专门针对IE6中的漏洞问题——当时IE7还没有发布

它只与IE有关；没有迹象表明其他浏览器也有同样的问题

根据（在“内存管理改进”的副标题下），IE 7包括了防止这种泄漏在浏览器窗口的整个生命周期内持续的改进，IE 8包含了进一步的改进，希望消除对这一问题的任何关注

所以你需要问的问题是：IE6对你来说有多重要？归根结底，DOM插入的顺序本不应该被关注，但如果（例如）您正在开发一个将在IE6上使用一段时间的intranet应用程序，那么您应该注意2005年文章中的要点。如果你有幸知道IE6对你的应用来说并不是雷达上的一个亮点，那就别担心了

---

哦，请注意，在将父对象附加到页面之前将所有内容附加到父对象将提供更好的性能：而不是每次添加新的子对象时都必须进行回流和重新绘制，当所有的东西都集中在一块时，浏览器可以进行一次回流和重新绘制。

我非常关心IE7，它是我最受支持的浏览器。我们不支持IE7。因此，如果泄漏不是在IE7中，我很好，我可以继续使用我一直使用的方法。IE7是否完全没有此类漏洞，或者只是在这方面有所改进？@Olivvv：如果我正确理解了这篇博文，当用户停留在一个页面上时，仍然会有漏洞，但它们将在导航到另一个页面（或者可能是重新加载现有页面）时得到解决。如果您的交互模型依赖于长时间停留在一个页面上并广泛地操作DOM，那么您应该注意本文中描述的问题。但是，如果你只做了相对较少的DOM操作并导航到其他页面，那么这不应该是一个问题。是的，它是一个单页面的webapp，每天只能加载一次。因此，即使是很小的内存问题也是明智的。我想下周我得花点时间来安排考试。然后我会在这里发布结果。所以我做了一个简单的测试页面。我没有发现IE7使用这种方法出现内存泄漏的情况。这是我的测试：