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);我在网上找到了这个页面，它基本上解释了同样的事情(在跨页面泄漏部分)：http://www.codeweblog.com/javascript-memory-leak-on-the-collation-of-draft-issues/
这是否意味着在性能和防泄漏之间存在对立？
在插入之前，是否应该创建新的DOM元素并将其作为字符串进行操作？js库是如何解决这个问题的？DocumentFragments是神奇的解决方案吗？
回答 3
Stack Overflow用户
发布于 2009-10-16 13:18:32
您引用的建议几乎肯定是受到了IE团队成员撰写的一篇关于memory leaks in (unsurprisingly) IE的文章的启发，特别是关于"DOM插入顺序泄漏模型“的部分。有两点值得注意：
- 这篇文章写于2005年，专门解决IE 6中的泄漏问题- IE 7当时甚至还没有发布；
- 它只与IE有关；没有任何迹象表明任何其他浏览器都存在同样的问题。
根据a 2008 post on the IE Team blog (在“内存管理改进”的副标题下)，IE7包括改进，以防止此类泄漏在浏览器窗口的生命周期中持续存在，而IE8包含进一步的改进，希望消除对此问题的任何关注。
所以你需要问的问题是: IE 6对你来说有多大的问题？归根结底，DOM插入的顺序从来都不应该是需要关心的问题，但是如果(例如)您正在开发一个将在IE 6上使用一段时间的intranet应用程序，那么您应该注意2005年的文章中的要点。如果你有幸知道IE 6在你的应用中几乎不是一个小亮点，那就不用担心了。
哦，请注意，在将父对象附加到页面之前，将所有内容都附加到父对象将提供更好的性能:浏览器可以在所有内容到达一个整齐的块时执行一次回流和重绘，而不是每次添加新的子项时都进行回流和重绘。
Stack Overflow用户
发布于 2009-10-16 12:48:02
根据yui网站上的一个演示文稿，使用innerHTML = 'html here‘是插入html的最有效方式。这是因为浏览器经过了优化，可以非常快速地解析HTML，而DOM作为一种标准，被认为是有缺陷的，并且在IE等浏览器中做得不正确。
所以为了更快，innerHTML是可行的，我不认为它们是内存泄漏，因为它是用来解析html并在加载时呈现页面的相同引擎。
Stack Overflow用户
发布于 2009-10-16 13:03:05
在将子项插入到文档中之前，在父项中插入子项没有任何错误。这是首选的方式(如您所建议的，出于性能原因)
您指定的链接表明它会导致泄漏，但我从未听说过这种情况。他们没有很好地解释为什么它会泄露。
如果它真的泄露了，它肯定只会泄露IE6，我建议你忽略这一点，因为它的市场份额一直在缩小。防止IE6中的泄漏可能是一项困难的工作，不值得这样做。
https://stackoverflow.com/questions/1577840
复制相似问题
腾讯云开发者
