创建 DOM 元素之间的区别：createElement、添加属性等 VS 创建它们的字符串然后附加 [重复]

Posted 2023-05-07

【中文标题】创建 DOM 元素之间的区别：createElement、添加属性等 VS 创建它们的字符串然后附加 [重复]

【英文标题】：Difference between creating DOM elements: createElement, add properties, etc VS creating String of them and then appending [duplicate]

【发布时间】：2015-12-24 15:13:30

【问题描述】：

我想知道这两种用于创建 HTML 元素的技术之间的区别。我找不到任何区别。我只想知道在任何基础上（性能或其他）是否存在差异或更多差异。

第一种使用 JS 内置方法的技术 -

var el1 = document.createElement('div');
el1.innerhtml = 'Element Div 1';
var el2 = document.createElement('span');
el2.innerHTML = ' - Span Element';
el2.classList.add('red');
document.body.appendChild(el1);
el1.appendChild(el2);
el1.id = "div";

.red 
    color: red;
    font-size: 13px;

#div 
    font-size: 18px;
    color: burlywood;

现在是第二种技术一步到位 -

document.body.innerHTML = '<div id="div">Element Div 1<span class="red"> - Span Element</span></div>';

.red 
  color: red;
  font-size: 13px;

#div 
  font-size: 18px;
  color: burlywood;

这两种技术都产生相同的结果，我可以轻松地操作以两种方式中的任何一种创建的每个 HTML 元素（并且以相同的方式）。

Fiddle1 使用第一种技术 Fiddle2 使用第二种技术

请参阅上面的两个小提琴，我使用相同的代码来操作元素。如您所见，两者都产生相同的输出。那么是什么让他们与众不同。第一个花了几行，而第二个只有 1 行。 它们之间有任何性能差异？？ 或者它们有我没有注意到的任何其他差异。

如果我在任何地方错了，请纠正我。

我知道第一个保留了对各种对象的引用，这在代码的后面会有所帮助，但在那之后我就不多说了。我的主要问题是 - 一个一个地创建元素、添加属性等与第二个通过使用 String 一步完成的区别。

谢谢。

【问题讨论】：

@Saar 它不仅与innerHTML 和createElement 有关，还与我使用的不同方法有关-appendChild、classList.add.. 第一种技术VS。第二个中没有使用..

性能并没有那么不同，但是使用 innerHTML，浏览器解析字符串（速度很快）并本地创建元素。当您使用 createElement 时，对它们的 javascript 函数调用，这是额外的开销（但也很快），所以据我所知，它几乎可以忽略不计。

有一个叫domly的框架，它使用createElement，它声称比innerHTML快一点，但我认为这是因为他们首先运行domly基准，所以其他人打GC。

@YOU 如果我创建 id 或 classList.add 以使用内置 JS 方法添加类，如在第一种情况下，而在其他情况下仅在字符串中创建......

这取决于您将从 javascript 添加多少，如果您运行百万次，可能会有所不同，但大多数正常用例没有太大差异。

【参考方案1】：

第二种情况不仅更短，而且总体上更快。

当你这样做时：

document.body.innerHTML = '<div id="div">Element Div 1<span class="red"> - Span Element</span></div>';

浏览器在单个事务中填充 DOM - 它确切地知道在多次插入之间不会发生任何事情。

在第一种情况下（“手动”DOM 填充），每行浏览器应确保 DOM 处于一致状态并至少触发 DOM 突变事件。

是的，第二种情况需要解析，但所有浏览器都有非常有效的 HTML 解析器。

【讨论】：

无论如何它更快.. 我上次看（或关心）是 5 年前。有更现代的经验证据吗？即使有多个 createElement 调用，根节点也只（嗯，只需要）附加一次，在添加所有子元素之后，在这种情况下应用相同的“事务”概念。

我自己实现了 HTML/CSS/脚本引擎 (sciter.com)，所以对这个主题有经验。考虑以下几点：在每个 container.appendChild(el1) 上，您需要 a) 删除其容器的渲染树，在某些情况下直到根。使容器的屏幕区域失效，通知所有订阅者 DOM 结构发生了变化，很多事情都发生了。作为替代方案 - 填充 DocumentFragment 并将其作为一个整体附加。但即使在这种情况下，你也会有一些任务，比如在 Element 对象的原型链中找到 appendChild 方法等。