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（请注意剃刀的帮助......写出许多h2可能很乏味）

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

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

这些发现是否准确？是从纯HTML标记呈现网页与从javascript创建的javascript附加元素呈现网页所需的时间有何不同？

Answer 1

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

Here是一些（过时的）信息：

正如您所看到的，IE7中的性能会急剧下降 HTML的复杂性增加了。如果你在之前放一个计时器 innerHTML setter，你会看到时间增加到那一点可以忽略不计。它实际上根本不是一个javascript性能问题; 它的DOM插入性能！

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

在运行时在javascript中创建元素比传统HTML元素慢吗？

1 个答案: