Question

我想知道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);

我在网上找到这个基本上解释相同的东西（在跨页泄漏部分下）： http://www.codeweblog.com/javascript-memory-leak-on-the-collation-of-draft-issues/

这是否意味着性能与防漏之间存在对立？

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

Answer 1

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

因此，为了快速，innerHTML是要走的路，我不相信它们是内存泄漏，因为它与用于解析html并在加载时呈现页面的引擎相同。

Answer 2

您引用的建议几乎肯定受到IE团队成员撰写的关于memory leaks in (unsurprisingly) IE的文章的启发，特别是关于“DOM插入订单泄漏模型”的部分。有两点值得注意：

这篇文章是在2005年专门为解决IE 6中的泄漏问题编写的 - 当时IE 7尚未发布;
它完全与IE有关;没有任何其他浏览器会遇到同样问题的建议。

根据a 2008 post on the IE Team blog（在“内存管理改进”小标题下），IE 7包含了一些改进措施，以防止此类泄漏在浏览器窗口的生命周期中持续存在，IE 8包含进一步的改进，希望能够消除对担心这件事。

所以你需要问的问题是：IE 6对你有多大的影响？在一天结束时，DOM插入的顺序永远不应该被关注，但是如果（例如）你正在使用将在IE 6上使用一段时间的内部网应用程序，那么你应该请注意2005年文章中的要点。如果您有足够的经验知道IE 6对于您的应用程序来说几乎不是什么昙花一现，那么请不要担心任何问题。

哦，请注意，在将父级附加到页面之前将所有内容附加到父将提供更好的性能：而不是每次添加新子项时都必须进行重排并重新绘制，当一切都到达一个整齐的块时，浏览器可以进行一次重排并重新绘制。

Answer 3

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

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

如果它确实泄漏了，它肯定只会在IE6中泄漏，我建议你忽略它随着它的市场份额不断缩小。防止IE6中的泄漏可能是一项艰巨的任务，而且不值得。

javascript dom插入。性能与泄漏？

3 个答案: