javascript - 从 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，它会重复触发 reflow，这可能会降低性能。

更好的方法是使用DocumentFragment。大卫沃尔什也可以找到一个非常快速的解释。

Answer 4

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

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

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