以字符串形式添加元素与使用createElement() [英] Adding elements as a string vs. createElement()

问题描述

对于我要完成的任务，我可以使用createElement()或innerHTML和字符串。

到底哪个更快？很长一段时间以来，我一直认为字符串比返回相同结果的内置函数慢得多，但这是真的吗？

我问是因为我试过createElement()，似乎必须添加到每个元素的所有属性都会减慢速度。不仅如此，它还占用了更多的空间。我有一个循环，它根据数组的长度从1到无穷大，但最好是在显示出速度减慢的迹象之前添加50个左右的元素。在我想要创建的这50个左右的元素中，还有大约10个元素。因此，它实际上总共创建了大约500个元素。

我注意到使用内置函数创建元素的速度比平时慢了一些，而且由于我在重置该数组(数组是5D的，并且不是在同一脚本中设置的)这一问题上游手好闲，我想知道在重新开始之前，就速度和更好的实践而言，哪一个真正更好。

推荐答案

此问题的性能差异因浏览器而异，并且(有时)在任何一个浏览器的不同版本之间也不同，我看过几篇不同的文章就此问题提供了不同的建议。

在我自己的经验中，我只回忆过一次，我确实需要对一个大的Web页面进行重大更改，特别是重新生成一个包含数百或数千行的表格元素，其中每行都有许多单元格，我发现构建一个字符串变量，然后在末尾设置innerHTML一次，比尝试通过DOM函数快得多。但，这是针对特定的内部网Web应用程序的，其中确保100%的用户使用IE，因此我不需要担心跨浏览器测试。

即使您决定走构建字符串的路线，关于如何加快速度也有不同的意见。我读过不止一篇文章，比较了连续添加到字符串末尾(标准myString += 'something' + 'something else'类型操作)和追加到数组变量末尾，然后使用Array.Join()在末尾创建一个大字符串的性能。对于某些版本的浏览器来说，这又一次产生了很大的不同，但在其他版本的浏览器中，这并没有什么不同或更糟。

这篇关于以字符串形式添加元素与使用createElement()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！