0
私は次のコードを思い付いたいくつかのJavaScriptのパフォーマンステストやっている間：最初の試行後に実行時間が長いのはなぜですか？ （JavaScriptの性能試験）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Performance Test</title>
<script>
var time1;
var time2;
var executionTime;
function writeALot(){
time1 = new Date().getTime();
var n = Number(document.getElementById("numberOfWrites").value);
var strBuffer = "";
document.getElementById("div1").innerHTML = "";
for (var i = 1; i <= n; i++) {
strBuffer += i + "<br />";
}
document.getElementById("div1").innerHTML = "Number of Writes: " + n + "<br />";
document.getElementById("div2").innerHTML = strBuffer;
}
function printExeTime(){
time2 = new Date().getTime();
executionTime = ((time2 - time1)/1000).toString();
document.getElementById("div1").innerHTML += "Execution Time: " + executionTime + " seconds";
}
</script>
</head>
<body>
<div id="inputDiv">
Number Of Writes
<br/>
<input type="text" id="numberOfWrites" value="10000">
</input><input type="button" value="Go" onclick="writeALot();printExeTime()">
</div>
<br/>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
を基本的にこれが何を0からテキストボックス（10000デフォルト）連結での数にカウントされます各数字と文字列の "<br>"タグは、Divの内容をこの文字列で置き換え、操作を実行するのにかかる時間を示します。
これは、生成されたコンテンツを文書に印刷する速度をテストするために行いました。このコードを試してみると、私はいくつかの問題に気付きました：
ページをリフレッシュした後初めてgoボタンを押すと、コードは次の試みよりもずっと高速に実行されます。ボタンが2回目にクリックされた後に1000未満の数値が表示されると、同じコードを最初に実行するのに要した時間の2倍の時間がかかりますが、実行時間の差が100000になるとはるかに大きい。
自分で試してみて、ページをロードして、一度ボタンを押すと、コードが速く実行され、次にもう一度ボタンを押して、違いを確認しますか？同じコードが実行された場合、なぜ最初から時間がかかりますか？
何かの理由で私が時間を測定する方法が正しく動作していないということは、私が間違った瞬間に新しい日付を取得しているように思えます。 divが変更されていますか？
これは動作します。今度は、コードを再実行するページ全体をリフレッシュするのが実際にボタンを2回押すよりも速いのは奇妙なことではありませんか？ divを消去/書き込みするより速い方法がありますか？ – victrnava
更新する前にdiv2の "display"を "none"に設定しようとするので、ブラウザはdiv2の背後にある視覚的なものを気にする必要がないので時間が節約されます。これがスピードアップするかどうかは分かりませんが、試してみる価値はあります。また、新しいDOMノードを作成してコンテンツをコピーし、div2を完全に破棄することもできます（あらかじめ非表示にしておくこともできます）。 PS：受け入れるときに私の答えを投票することができます:) –
ああ、他人が何を試して比較しているのかをWebからチェックして忘れました。DOMの操作をスピードの点で考えると、スピードを上げるために何を追加するかというアイディアを得ることもできます。また、アプリケーションに応じて、コンテンツ部分全体を部分的に読み込むことで "怠惰な読み込み"を行うこともできます（このページで確認してください。http://www.webresourcesdepot.com/dnspinger/）。こうすることで、ページのレスポンスが向上し、ユーザーは一度に完全なデータの小さなサブセットで作業する傾向があります。決して全体として。 –