以字符串形式添加元素与 createElement()

发布于 2024-11-04 14:13:58 字数 429 浏览 3 评论 0原文

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

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

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

我注意到，通过使用内置函数创建元素，速度比平常要快一些，并且由于我在重置该数组时胡作非为（该数组是 5D 并且未在同一脚本中设置），我想知道哪个确实更好，无论是速度还是在重新开始之前更好的练习。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柒夜笙歌凉 2024-11-11 14:13:58

此问题的性能差异因浏览器而异，并且（有时）在任何一种浏览器的不同版本之间存在差异，而且我见过一些不同的文章对此问题提供了不同的建议。

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

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

回复收藏 0 原文

番薯 2024-11-11 14:13:58

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

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

使用innerHTML 有一些注意事项：

在其他同级节点之间插入多个同级节点是很困难的。为此，您最终需要将 HTML 插入到其他一些元素（例如 div）中，然后将创建的元素移动到 DOM 中。不幸的是，你不能为此使用 documentFragment，因此它需要迭代子节点
在表上使用它可能会出现问题，IE 不喜欢修改表中除 TD 之外的各种元素的innerHTML
浏览器生成不同的 HTML 作为innerHTML属性，因此使用它来序列化元素是有问题的。
使用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）时，侦听器将被删除。

innerHTML makes sense if you have large chunks of content to append to or fill an existing element.

Not that long ago, DOM methods were very much slower than assigning to an element's innerHTML property, but lately they are pretty quick and are just inconvenient because of all the required calls. But you can create helper functions that accept an object with all the information required to create an element to ease the burden.

There are some caveats to the use of innerHTML:

It is difficult to insert a number of sibling nodes between other siblings. To do this you end up inserting the HTML into some other element (e.g. a div) then moving the created elements into the DOM. Unfortunatly you can't use a documentFragment for this, so it requires iterating over child nodes
Using it on tables can be problemtatic, IE doesn't like modifying the innerHTML of various elements within a table other than TD
Browsers generate differnt HTML as the innerHTML property, so using it to serialise elements is problematic
Using the innerHTML property may delete listeners on other elements, even if they aren't modified by the 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>

You can click on the first button to add a click listener to div0, but when you click on the second button (which appears to do nothing but in fact resets the innerHTML) the listener is removed.

回复收藏 0 原文