在运行时用javascript创建元素是否比经典HTML元素慢？

我试图弄清楚创建元素以呈现给DOM是否比使用简单的HTML标记（例如

）慢

我开始问这个问题，但在这里没有找到一个满足我好奇心的答案。因此，我决定只做一个简单的测试来运行。我意识到这不是一个很大的问题，因为我将提供我的发现，但也许有一些边缘案例或其他人有一些好的提示

我使用了mvc3 razor引擎的一些帮助来生成大量经典HTML元素

Javascript方法：

<div id="appendHere">
</div>
<script type="text/javascript">
    var appenders = [];
    for(var i = 0; i < 10000; i++){
     var appenderIzer = document.createElement("h2");
     appenderIzer.innerHTML = "TestJs";
     document.getElementById("appendHere").appendChild(appenderIzer);
     appenders.push(appenderIzer);
    }
</script>

var appenders=[]；
对于（变量i=0；i<10000；i++）{
var appenderIzer=document.createElement（“h2”）；
appenderIzer.innerHTML=“TestJs”；
document.getElementById（“appendHere”）.appendChild（appenderIzer）；
推（追加器）；
}

所以在这里，我将使用javascript创建元素，然后将其附加到div元素。我选择将元素存储在数组中，以查看这是否也会影响加载性能

经典HTML（请注意razor的帮助……写出许多h2可能很乏味）

@for（int i=0；i<10000；i++）
{
TestClassic
}

最后真的没有什么区别，也许是纳秒。可能有一些因素会突出这种差异，但在其他变化中我找不到它们

---

这些发现准确吗从纯HTML标记呈现页面与从javascript创建的javascript附加元素呈现页面所需的时间是否有差异？

将DOM元素插入到已呈现的页面中要比从页面刷新呈现相同的元素慢得多。速度慢多少取决于插入的方式。这在很大程度上还取决于您有多少样式，以及嵌套的DOM有多少层。浏览器版本也很重要

是一些（过时的）信息：

如您所见，IE7中的性能随着 HTML的复杂性增加了。如果你把计时器放在 innerHTML setter，您将看到增加到该点的时间是 可以忽略不计的这实际上根本不是javascript性能问题； 这是DOM插入性能

---

根据微软的说法，多达70%的IE性能花费在浏览器上。

这将取决于浏览器，而且网络传输时间很可能会导致比在客户端上创建它们所需的时间更大的延迟。通常情况下，在动态创建元素时，您只需要附加一次（如果可能）而不是将每个单独的元素附加到文档中，因为它只需要重新绘制一次，而不是多次重新绘制，这是一项昂贵的任务。虽然有点过时，但您提供的源代码中有一些很好的要点和链接。我通读了一遍，并在底部注意到，尽管从appending进行DOM渲染据说很慢，但使用

InnerHTML

作为渲染机制实际上相当快。InnerHTML=纯文本比element.appendChild（document.creteElement（'h2'））快得多。

@for (int i = 0; i < 10000; i++)
{
 <h2>TestClassic</h2>
}