documnt.innerHTML与document.createElement ...性能会有明显的不同吗？

Question

想象一下，有一个更大的网站可以接受用户交互，并且需要显示很多新元素，并且当用户单击某处时删除其他元素。

这两种方法在性能上有显着差异吗？

---

将所有内容都放在字符串中：

var x = document.getElementByID("x");
x.innerHTML = "<div><div><span>...</span><div>...</div></div></div>"` 

---

这样编写层次结构：

var a = document.createElement("div");
var b = document.createElement("div");
var c = document.createElement("span");
// ...
a.appendChild(b)
b.appendChild(c)
// ...
var x = document.getElementByID("x");
document.body.insertBefore(a, x);