JavaScript:使用 innerHTML 或(大量)createElement 调用来添加复杂的 div 结构更好吗? [英] JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure?
问题描述
我正在研究一个问题，需要为大约 100 个元素的集合中的每个元素创建一个复杂的 div 块.
除了内容之外，每个单独的元素都是相同的，它们看起来(在 HTML 中)是这样的:
<div class="spacer"></div><div id="内容">内容</div><div class="spacer"></div><div id="content2">content2</div><div class="class4">content3</div><div class="spacer"></div><div id="footer">content3</div>我可以:
1) 将所有元素创建为 innerHTML 并使用字符串连接来添加内容.
2) 使用 createElement、setAttribute 和 appendChild 来创建和添加每个 div.
选项 1 下载的文件稍小一些，但选项 2 的渲染速度似乎稍快一些.
除了性能之外，是否有充分的理由选择一条路线或另一条路线?我应该测试任何跨浏览器问题/性能问题吗?
...还是我应该尝试模板和克隆方法?
非常感谢.
取决于什么对你来说更好".
性能
从性能的角度来看，createElement+appendChild 胜出很多.看看我在比较两者时创建的 this jsPerf脸.
innerHTML: ~120 ops/seccreateElement+appendChild:~145000 次操作/秒(在我装有 Chrome 21 的 Mac 上)
此外，innerHTML 会触发页面重排.
在带有 Chrome 39 的 Ubuntu 上测试得到类似的结果
innerHTML: 120000 ops/sec创建元素:124000 次操作/秒可能会进行一些优化.在带有基于 QtWebkit 的浏览器 Arora(wkhtml 也 QtWebkit)的 Ubuntu 上，结果是
innerHTML: 71000 ops/seccreateElement:282000 次操作/秒似乎 createElement 平均速度更快
可维护性
从可维护性的角度来看，我相信字符串模板对您有很大帮助.我使用 Handlebars(我喜欢)或 Tim(适用于需要最小占用空间的项目).当您编译"(准备)您的模板并准备将其附加到 DOM 时，您可以使用 innerHTML 将模板字符串附加到 DOM.我为避免回流所做的技巧是为包装器创建元素，并在该包装器元素中，将模板与innerHTML 一起放置.我仍在寻找一种完全避免使用 innerHTML 的好方法.
兼容性
您不必担心，这两种方法都得到了广泛的浏览器的完全支持(与 altCognito 所说的不同).您可以查看 createElement 和 appendChild.
I'm looking at a problem that needs a complex block of divs to be created once for each element in a set of ~100 elements.
Each individual element is identical except for the content, and they look (in HTML) something like this:
<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>
I could either:
1) Create all the elements as innerHTML with string concatenation to add the content.
2) Use createElement, setAttribute and appendChild to create and add each div.
Option 1 gets a slightly smaller file to download, but option 2 seems to be slightly faster to render.
Other than performance is there a good reason to go via one route or the other? Any cross-browser problems / performance gremlins I should test for?
...or should I try the template and clone approach?
Many thanks.
Depends on what's "better" for you.
Performance
From a performance point of view, createElement+appendChild wins by a LOT. Take a look at this jsPerf I created when I compare both and the results hit in the face.
innerHTML: ~120 ops/sec
createElement+appendChild: ~145000 ops/sec
(on my Mac with Chrome 21)
Also, innerHTML triggers page reflow.
On Ubuntu with Chrome 39 tests get similar results
innerHTML: 120000 ops/sec
createElement: 124000 ops/sec
probably some optimisation take place. On Ubuntu with QtWebkit based browser Arora (wkhtml also QtWebkit) results are
innerHTML: 71000 ops/sec
createElement: 282000 ops/sec
it seems createElement faster in average
Mantainability
From a mantainability point of view, I believe string templates help you a lot. I use either Handlebars (which I love) or Tim (for project which need smallest footprints). When you "compile" (prepare) your template and it's ready for appending it to the DOM, you use innerHTML to append the template string to the DOM. On trick I do to avoid reflow is createElement for a wrapper and in that wrapper element, put the template with innerHTML. I'm still looking for a good way to avoid innerHTML at all.
Compatibility
You don't have to worry here, both methods are fully supported by a broad range of browsers (unlike altCognito says). You can check compatibility charts for createElement and appendChild.
这篇关于JavaScript:使用 innerHTML 或(大量)createElement 调用来添加复杂的 div 结构更好吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
