JavaScript:使用innerHTML 或(大量)createElement 调用来添加复杂的div 结构是否更好？

Question

这个问题已经有答案了:

Deep cloning vs setting of innerHTML: what's faster? (2 个回答)

已关闭 9 年前。

我正在研究一个问题，需要为一组大约 100 个元素中的每个元素创建一次复杂的 div block 。

除了内容之外，每个单独的元素都是相同的，它们看起来(在 HTML 中)如下所示:

<div class="class0 class1 class3">
<div class="spacer"></div>
<div id="content">content</div>
<div class="spacer"></div>
<div id="content2">content2</div>
<div class="class4">content3</div>
<div class="spacer"></div>
<div id="footer">content3</div>
</div>

我可以:

1) 创建所有元素为innerHTML使用字符串连接来添加内容。

2) 使用createElement , setAttribute和appendChild创建并添加每个 div。

选项 1 下载的文件稍小，但选项 2 的渲染速度似乎稍快。

除了性能之外，还有选择其中一种路线的充分理由吗？我应该测试任何跨浏览器问题/性能问题吗？

...或者我应该尝试模板和克隆方法吗？

非常感谢。

Answer 1

取决于什么对您“更好”。

性能

从性能 Angular 来看，createElement+appendChild 胜出很多。看看this jsPerf当我比较两者时，我创建了它，结果打脸了。

innerHTML: ~120 ops/sec
createElement+appendChild: ~145000 ops/sec

(在装有 Chrome 21 的 Mac 上)

此外，innerHTML 会触发页面回流。

在带有 Chrome 39 的 Ubuntu 上 tests得到相似的结果

innerHTML: 120000 ops/sec
createElement: 124000 ops/sec

可能会进行一些优化。在 Ubuntu 上，使用基于 QtWebkit 的浏览器 Arora(wkhtml 也是 QtWebkit)结果为

innerHTML: 71000 ops/sec
createElement: 282000 ops/sec

平均而言，createElement 似乎更快

可维护性

从可维护性的 Angular 来看，我相信字符串模板对您有很大帮助。我使用 Handlebars (我喜欢)或Tim (适用于需要最小占地面积的项目)。当您“编译”(准备)模板并准备好将其附加到 DOM 时，您可以使用innerHTML 将模板字符串附加到 DOM。我为避免回流所做的技巧是为包装器创建Element，并在该包装器元素中将模板与innerHTML 放在一起。我仍在寻找一种完全避免使用innerHTML 的好方法。

兼容性

您不必在这里担心，这两种方法都受到多种浏览器的完全支持(与 altCognito 所说的不同)。您可以检查 createElement 的兼容性图表和 appendChild .