JavaScript:使用innerHTML或(很多)createElement调用来添加复杂的div结构会更好吗？

Question

我正在研究一个问题,需要为一组~100个元素中的每个元素创建一个复杂的div块.

除了内容之外,每个单独的元素都是相同的,它们看起来(在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

都不是.使用像jQuery,Prototype,Dojo或mooTools这样的库,因为这两种方法都充满了麻烦:

• 您是否知道IE的表格上的innerHTML是只读的？
• 您是否知道选择元素它也被打破了？
• createElement的问题怎么样？

主要javascript库的编写者花费了大量时间并拥有完整的错误跟踪系统,以确保在调用他们的DOM修改工具时他们实际工作.

如果你正在编写一个库来与上述工具竞争(如果你有好的话,祝你好运),那么我会选择基于性能的方法,而innerHTML在过去总是胜出,因为innerHTML是一个原生方法,它是一个安全的赌注,它将保持最快.

Answer 2

取决于你的"更好".

性能

从性能的角度来看,createElement + appendChild赢了很多.看看我创建的这个jsPerf,当我比较两者和面部结果时.

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

(在我的Mac上使用Chrome 21)

此外,innerHTML触发页面重排.

在使用Chrome 39 测试的 Ubuntu上获得类似的结果

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

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

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

似乎createElement的平均速度更快

Mantainability

从可持续性的角度来看,我相信字符串模板对您有很大帮助.我使用Handlebars(我喜欢)或Tim(用于需要最小脚印的项目).当您"编译"(准备)模板并准备将其附加到DOM时,您可以使用innerHTML将模板字符串附加到DOM.我要避免重排的技巧是包装器的createElement,在该包装器元素中,将模板与innerHTML放在一起.我仍然在寻找一种避免使用innerHTML的好方法.

兼容性

您不必担心,这两种方法都得到了各种浏览器的完全支持(与altCognito不同).您可以检查createElement和appendChild的兼容性图表.

Answer 3

altCognito提出了一个很好的观点 - 使用库是一种方法.但如果是手工完成,我会使用选项#2 - 使用DOM方法创建元素.它们有点难看,但你可以制作隐藏丑陋的元素工厂功能.连接HTML字符串也很丑陋,但更容易出现安全问题,尤其是XSS.

不过,我绝对不会单独追加新节点.我会使用DOM DocumentFragment.将节点附加到documentFragment比将它们插入实时页面要快得多.当你完成构建片段时,它会立即插入.

John Resig解释得比我好多了,但基本上你只是说:

var frag = document.createDocumentFragment();
frag.appendChild(myFirstNewElement);
frag.appendChild(mySecondNewElement);
...etc.
document.getElementById('insert_here').appendChild(frag);

Answer 4

就我个人而言，我使用innerHTML，因为这是我所习惯的，对于类似的事情，W3C 方法会给代码带来很多混乱。

只是减少 div 数量的一种可能方法，但是，您使用间隔元素而不是仅编辑内容 div 上的边距是否有任何原因？