DOM 元素创建与 .innerHTML 与直接答案

【问题标题】：DOM Element Creation vs. .innerHTML vs. DirectDOM 元素创建与 .innerHTML 与直接
【发布时间】：2012-01-09 22:22:46
【问题描述】：

在生成动态内容时，简单地创建 HTML 并将其插入 .innerHTML 或直接在 DOM 中创建元素，哪种方式更好？

我不关心复杂性或其他问题。只是在客户端处理时间。

哪个更快？

如果我必须按照效率（处理时间短）的顺序来猜测，这将是：

这将与实现的复杂性成反比：

这是一个验证问题？有人可以验证这是在考虑复杂性和速度时确定如何更新客户端（即 javascript）的权衡吗？

研究：

我不关心他们在这里的安全性-> InnerHTML vs. DOM - Security

InnerHTML vs. DOM 这不是重复的，因为它只涵盖了我的部分问题。

【问题讨论】：

我现在无法通过链接备份此内容，但 IIRC innerHTML 最快。
What is better, appending new elements via DOM functions, or appending strings with HTML tags?的可能重复
我链接的 dup 包括许多 jsperf 链接和讨论在哪些情况下更快。
为什么 noboby 比较 .innerHTML 是直接 write..say document.write() 还是直接渲染 HTML？

【解决方案1】：

根据我自己的个人测试，它们的速度都足以满足大多数需求。但是如果你正在做一些疯狂的事情，比如在一个页面上创建数千个元素，最快的方法是使用文档片段。 John Resig 写了一篇很好的博客文章。 http://ejohn.org/blog/dom-documentfragments/

【讨论】：

【解决方案2】：

DOM 插入不一定比更新innerHTML 快，例如，请参阅http://segdeha.com/experiments/innerhtml/ 和http://www.quirksmode.org/dom/innerhtml.html 的基准测试。实现innerHTML 解决方案可能会更快，请注意它在使用 XHTML 时不可用。

【讨论】：

我在我的 javascript 中使用这个 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 和 .innerHTML...什么错误/警告我应该看到吗？你确定吗？
您是否将文档作为 XHTML 提供，即作为 application/xhtml+xml？
实际上，一些浏览器可能已经支持innerHTML，即使在XHTML文档中，如果innerHTML成为HTML5标准的一部分，事情应该会变得更好：w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1

【解决方案3】：

根据我的经验，它们在性能上基本上是可比的。但是，如果您使用 DOM 方法，您可以更好地使用闭包的强大功能，因此您可以直接将数据和函数绑定到各个 DOM 元素。

为了性能，无论采用哪种方法，主要的事情是隐藏或删除要修改的 DOM 部分，在 DOM 之外进行所有更改，然后将其作为一个单一操作放回 DOM 以避免浏览器中不必要的重排（重绘）。

【讨论】：

【解决方案4】：

Lots of jsPerf benchmarks cover this topic;尝试在网络上搜索“jsperf innerhtml domelement”或其他有意义的搜索组合。

【讨论】：