Question

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

哪一个性能更好？

Answer 1

直接使用DOM API要快得多，因为它不必调用HTML解析器。

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

比

快得多

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

但是，在大多数情况下，除非您正在执行对性能敏感的事情，否则请使用创建更易读代码的代码。

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);

Answer 3

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

现在可以说，更新DOM是一件昂贵的事情。它应该被最佳使用。本杰明提到的是正确的。但是如果你继续直接更新DOM，它会反复触发重排，这可能会降低性能。

更好的方法是使用DocumentFragment。 David Walsh也可以找到一个非常快速的解释。

Answer 4

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