Question

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

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

我问，因为我已经尝试了createElement()，似乎所有必须添加到每个元素的属性都会减慢速度。不仅如此，它也占用了更多的空间。我有一个循环，根据数组的长度从1-infinity到任何地方，但最好在显示减速迹象之前添加多达50个左右的元素。在我想要创建的这50个元素中，大约有10个元素。所以，总的来说，它实际上创造了大约500个元素。

我注意到通过使用内置函数创建元素比平常更快一点，并且由于我无意中重置了该数组（数组是5D并且没有在同一个脚本中设置），我想要要知道哪个更好，无论是速度还是简单的更好的练习，都要做到这一点。

Answer 1

此问题的性能差异因浏览器和（有时）在任何一个浏览器的不同版本之间有所不同，我看到一些不同的文章就此问题提供了不同的建议。

根据我自己的经验，我只记得有一次我真的需要对一个大网页进行大的更改，特别是重建一个包含数百个或可能有数千个行的表元素，每个行都有很多单元格，并且< strong>我发现构建一个字符串变量，然后在结束时设置innerHTML一次，比通过DOM函数尝试更快。但是，这是针对特定的Intranet Web应用程序，保证100％的用户都在IE上，所以我不需要担心跨浏览器测试。

即使您决定采用字符串构建路线，对于如何提高速度也会有不同的意见。我读了不止一篇文章，比较了不断添加到字符串末尾（标准myString += 'something' + 'something else'类型操作）的性能，而不是追加到数组变量的末尾，然后使用Array.join（）创建最后一个大字符串。对于某些浏览器的某些版本而言，这又产生了很大的不同，但在其他浏览器中没有区别或更糟。

Answer 2

如果您有大量内容要追加或填充现有元素，那么

innerHTML就有意义。

不久之前，DOM方法比分配给元素的innerHTML属性慢得多，但是最近它们非常快，并且由于所有必需的调用而不方便。但是您可以创建辅助函数来接受一个对象，其中包含创建元素所需的所有信息以减轻负担。

使用innerHTML有一些注意事项：

很难在其他兄弟姐妹之间插入许多兄弟节点。为此，您最终将HTML插入到其他元素（例如div）中，然后将创建的元素移动到DOM中。不幸的是，你不能为此使用documentFragment，因此它需要迭代子节点
在表格上使用它可能会有问题，IE不喜欢修改TD以外的表格中各种元素的innerHTML
浏览器生成不同的HTML作为innerHTML属性，因此使用它来序列化元素是有问题的
使用innerHTML属性可能会删除其他元素上的侦听器，即使它们未被innerHTML修改

e.g。

<div id="div0">div0</div>

<!-- Button to add a click listener to above div -->
<button onclick="
  var el = document.getElementById('div0');
  el.onclick = function(){alert(this.id);}
">Add listener as property</button>

<!-- Button to modify the body's innerHTML -->
<button onclick="
  var body = document.getElementsByTagName('body')[0];
  body.innerHTML += '';
">Append to body.innerHTML</button>

您可以单击第一个按钮向 div0 添加单击侦听器，但是当您单击第二个按钮（似乎什么都不做但实际上重置了innerHTML）时，将删除侦听器

Answer 3

我猜你已经部分回答了自己的问题。

除非您想使用innerHTML插入非常大的html块，否则速度不会受到影响。使用createElement更加“DOM友好”，但最终会有更多的代码行来进行小的更改。

我个人使用innerHTML，或者jQuery与.html()属性一起使用。但是当我必须使用循环执行一个复杂的工作时，我使用了创建元素。

最后，所有这些都与不重要的性能差异相同。一旦浏览器重排文档，您就可以以相同的方式访问您的文档。

将元素添加为字符串与createElement（）

3 个答案: