3

我试图弄清楚创建元素以呈现给 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-appended 元素呈现页面所需的时间有区别吗？

4

1 回答 1

1

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

Here is some (out of date) information:

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!

Up to 70% of IE performance is spent in rendering and layout, according to Microsoft.

于 2012-06-11T21:29:17.720 回答