javascript - 在运行时在 javascript 中创建元素是否比传统的 HTML 元素慢？

Question

我想弄清楚创建元素以呈现到 DOM 是否比使用简单的 HTML 标记慢，例如 <h2>例如。

我带着这个问题出发，并没有在这里找到满足我好奇心的答案。因此，我决定只做一个简单的测试来运行。我意识到这不是一个太大的问题，因为我将提供我的发现，但也许存在极端情况或其他人有一些好的提示。

我使用了 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>

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

经典 HTML(注意 razor 的帮助...写出许多 h2 可能很乏味)

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

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

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

Answer 1

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

Here是一些(过时的)信息:

As you can see, the performance in IE7 degrades dramatically as the complexity of the HTML increases. If you put a timer before the innerHTML setter, you will see that the time increase to that point is negligible. It's actually not a javascript performance problem at all; it's DOM insertion performance!

高达 70% 的 IE 性能花费在 rendering and layout 上，根据微软的说法。