javascript dom 插入。性能与泄漏？

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 元素之前，是否应该创建新的 DOM 元素并将其作为字符串进行操作？ js 库如何解决这个问题？ DocumentFragments 是奇迹解决方案吗？

Answer 1

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

因此，为了快速起见，innerHTML 是最佳选择，我不相信它们是内存泄漏，因为它与用于解析 html 并在加载时渲染页面的引擎相同。