Why is the lead time longer after the first attempt? (javaScript performance test)
While doing some JavaScript performance tests, I came up with the following piece of code:
<!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>
Basically what it does is counting from 0 to the number in the textbox (10000 by default) concatenating each number, and the <tag <br>
to a String, replaces the contents of the Div with that string and shows the "time" I took to do the operation.
I did this to test how quickly the generated content can be created in the document. After trying this code, I noticed a couple of problems:
The first time you hit the go button, after refreshing the page, the code runs much faster than the following attempts. For numbers less than 1000, after the second time the button is pressed, it may take twice as long to execute the same code, but once you start raising the number 100000, for example, the difference in execution time will be much larger.
Try it yourself and see, load the page, click the button once, the code will run fast, then click the button again and see the difference? If the same code is running, why does it take so long after the first time?
Another subtle one, I notice that for some reason the way of measuring the time is not working as expected, it looks like I am getting a new date at the wrong moment, is there something like an event that fires after the content on the div has changed?
a source to share
Comment:
// document.getElementById("div2").innerHTML = strBuffer;
and see if you get more the same times. The first time around, the amount of DOM manipulation over is div2
much easier than at any other time, as it should:
- opt out of content
div2
- create new content
The first click has no step 1. And that also explains the difference when you have many items versus fewer.
a source to share
Due to the flow model used by most javascript implementations, it will be difficult for you to do what you are trying to do. The watch basically stays in place while you do your hard cycle. I have no suggestion on how accurate the loop time is like yours. Usually if I need to do something and update something when I do, I use setTimeout or setInterval