DOM元素创建与.innerHTML与Direct

Question

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

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

哪个更快？

如果我必须按效率（低处理时间）的顺序猜测，那就是：

1. DOM Creation
2. .innerHTML属性插入
3. 直接写作

这与实施的复杂性成反比：

1. 直接写作
2. .innerHTML属性插入
3. DOM Creation

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

研究

我不关心他们在这里的安全问题 - ＆gt; InnerHTML vs. DOM - Security

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

Answer 1

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

Answer 2

从我自己的个人测试中，他们都能满足大多数需求。但是，如果您正在做一些疯狂的事情，比如为页面创建数千个元素，最快的方法就是使用文档片段。 John Resig写了一篇关于它的好博文。 http://ejohn.org/blog/dom-documentfragments/

Answer 3

根据我的经验，他们的表现基本相当。但是，如果使用DOM方法，您可以更好地访问闭包的功能，这样您就可以直接将数据和函数绑定到各个DOM元素。

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

Answer 4

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