从 JavaScript 创建 HTML 元素时的性能一致性是什么?

Question

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

1. 我可以使用createElement()函数创建 HTML 元素：

   document.createElement('div');
   

2. 我可以直接将"<div>Test</div>"等元素创建为字符串。

哪一个性能更好？

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）：

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

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