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 (カミソリの助けに注意してください...多くの h2 は退屈になる可能性があることを書き留めます)

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

結局、おそらくナノ秒の違いはありませんでした。この違いを強調する要因があるかもしれませんが、他のバリエーションではそれらを見つけることができませんでした.

これらの調査結果は正確ですか? 純粋な HTML タグからページをレンダリングするのにかかる時間と、javascript で作成された javascript が追加された要素からページをレンダリングするのにかかる時間に違いはありますか?

4

1 に答える 1

1

既にレンダリングされたページに DOM 要素を挿入すると、ページを更新して同じ要素をレンダリングするよりもはるかに遅くなります。どれだけ遅くなるかは、挿入の方法によって異なります。また、スタイリングの量と、ネストされたDOMのレイヤーの数にも大きく依存します。ブラウザのバージョンも重要です。

ここにいくつかの（古い）情報があります：

ご覧のとおり、IE7 のパフォーマンスは、HTML の複雑さが増すにつれて劇的に低下します。innerHTML セッターの前にタイマーを配置すると、その時点までの時間の増加は無視できることがわかります。実際には、JavaScript のパフォーマンスの問題ではありません。DOM挿入性能です！

Microsoft によると、IE パフォーマンスの最大 70% がレンダリングとレイアウトに費やされています。

于 2012-06-11T21:29:17.720 に答える