11

对于我想要完成的事情，我可以使用createElement()orinnerHTML和一个字符串。

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

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

通过使用内置函数创建元素，我注意到速度比平时快了一点，并且由于我在重置该数组（数组是 5D 并且没有在同一个脚本中设置），我想知道哪个确实更好，无论是速度还是更好的实践，然后再重新开始。

4

3 回答 3

5

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

以我自己的经验，我只记得有一次我真的需要对一个大网页进行大量更改，特别是重建一个表格元素，该元素有数百或可能数千行，每行都有很多单元格，我发现构建设置一个字符串变量，然后在最后设置一次 innerHTML比尝试通过 DOM 函数执行它要快得多。但是，这是针对特定的 Intranet Web 应用程序，它保证 100% 的用户将使用 IE，因此我无需担心跨浏览器测试。

即使你决定走弦乐构建路线，关于如何加快速度也有不同的看法。我读过不止一篇文章比较了连续添加到字符串末尾（标准myString += 'something' + 'something else'类型操作）与追加到数组变量末尾然后使用 Array.join() 在结尾。同样，这对某些浏览器的某些版本产生了很大的影响，但在其他浏览器中没有什么不同或更糟。

于 2011-05-04T05:29:39.143 回答
2

如果您有大量内容要附加到或填充现有元素，则 innerHTML 是有意义的。

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

使用 innerHTML 有一些注意事项：

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

例如

<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），侦听器将被删除。

于 2011-05-04T05:22:04.547 回答
1

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

除非您想使用 innerHTML 插入很大的 html 块，否则速度不会受到真正的影响。使用 createElement 更“对 DOM 友好”，但有时你会得到更多代码行来进行小改动。

我个人使用innerHTML 或任何jQuery 与该.html()属性一起使用。但是当我必须使用循环来执行复杂的工作时，我会使用 create 元素。

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

于 2011-05-04T03:58:49.263 回答