当使用JavaScript创建HTML元素时，有哪些性能考虑因素？

Question

我想使用JavaScript创建一个HTML部分，有两个选项：

1. I can create HTML elements using createElement() function:

   document.createElement('div');
   

2. I can directly create elements like "<div>Test</div>" as a string.

哪个性能更好？

- Ankit Gupta

---

你可以使用此服务进行测试目的：http://jsperf.com/ - Ivan Chernykh

查看这篇文章：https://dev59.com/eWbWa4cB1Zd3GeqPVEZB#11550785 - Bergi

安基特，为什么你添加了jQuery标签？（jQuery只是用JavaScript编写的库）。另外，在你看来我的回答缺少哪些信息？你还想知道什么？ - Benjamin Gruenbaum

作为警告，请停止对此问题进行微小的字符编辑以将其推到主页的前列。如果您再次这样做，我们将锁定该问题，禁止进行未来的编辑或投票。 - Brad Larson

好的，你没有听我的话，所以我会暂时锁定这个。 - Brad Larson

Answer 1

直接使用DOM API会更快，因为它不需要调用HTML解析器。

 var div = document.createElement("div");
 container.appendChild(div);

比...快得多。

 container.innerHTML += "<div></div>";

然而，在大多数情况下，除非您正在进行性能敏感的操作，否则请使用创建更易读的代码的选项。

- Benjamin Gruenbaum

---

如果你真的关心原始数据，那么有很多人在jsPerf上创建了基准测试，你可以搜索“innerHTML vs appendChild benchmark jsperf”。我故意没有包含这样的基准测试，因为在99%的情况下，阅读这样的基准测试并相应地采取行动是过早优化。使用哪个使代码更易读，然后在需要时进行优化。在我看来，它真正归结于你是否将DOM API视为HTML的抽象或反之。 - Benjamin Gruenbaum

你还应该看一下John Resig关于DocumentFragments的研究成果：http://ejohn.org/blog/dom-documentfragments/ - aefxx

Answer 2

可能有些偏题，但我认为如果有人要使用innerHTML，这是一个重要的观点

这样做非常错误：

container.innerHTML = "<div>";
container.innerHTML += "Hello ";
container.innerHTML += "World";
container.innerHTML += "</div>";

如果你真的需要构建字符串，只有在 HTML 完成后才追加它，你不想用不完整的 HTML 多次调用解析器。

var html;
html = "<div>";
html += "Hello ";
html += "World";
html += "</div>";

container.innerHTML = html;

另一个要点是，innerHTML 会再次解析所有内容，并且将删除容器内部元素附加的任何事件处理程序。

container.innerHTML += moreContent; //previous content lost their event handlers

使用DOM，您不需要担心这个问题，只有新内容将被解析。

container.appendChild(moreContent);

- Vitim.us

Answer 3

每次调用DOM操作方法时，浏览器都需要计算页面上所有元素的相对位置和大小，并重新渲染。这个过程称为回流。关于回流的一篇旧但仍然有用的文章可以在这里找到：http://ajaxian.com/archives/browser-reflows-how-do-they-affect-performance。

话虽如此，更新DOM是一个代价高昂的事情。它应该被最优化地使用。Benjamin所说的是正确的。但是如果您继续直接更新DOM，则会反复触发回流，可能会降低性能。

更好的方法是使用DocumentFragment。快速说明也可以在这里找到：David Walsh。

- skeep

Answer 4

从下面的基准测试结果来看，使用 innerHtml 比使用 DOM 方法要快得多（我尝试了在 Chrome 和 IE 中使用）：

http://www.quirksmode.org/dom/innerhtml.html#t10

http://jsperf.com/realistic-innerhtml-vs-appendchild/15

- dima.y

---

请在您的回答中总结结果，而不仅仅是简单地链接到 SO（Stack Overflow）。我们的目标是保留回答的实用性，即使外部资源消失。 - Shawn Mehan