Not all JavaScript loops are identical. Try the code below by pasting the HTML in this tip into a file and then opening the file in your browser. You should find that the Duffs method provides the best optmization, while the second best optimization involves instantiating length in a variable and locally validating with it in the loop.
The optimization works for all common browsers, such as FireFox, IE, etc.
<html><head><title>JavaScript loop speed test</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<script type=text/javascript>
window.onload = function () {
for (var i=0, elm; i<10000; i++) {
elm = document.createElement("div");
elm.innerHTML = "Hej";
document.body.appendChild(elm);
}
document.getElementById("start-test").onclick = startTest;
};
function startTest() {
var divs = document.getElementsByTagName("div");
var time1 = new Date().getTime();
for (var i=0; i<divs.length; i++) {
}
document.getElementById("time-1").innerHTML = new Date().getTime() - time1;
var time2 = new Date().getTime();
for (var i=0; divs[i]; i++) {
}
document.getElementById("time-2").innerHTML = new Date().getTime() - time2;
var time3 = new Date().getTime();
for (var i=0, il=divs.length; i<il; i++) {
}
document.getElementById("time-3").innerHTML = new Date().getTime() - time3;
var time4 = new Date().getTime();
var i = 10000 % 8;
if( i>0 ) {
do {
}
while( --i );
}
i = parseInt( 10000 / 8 );
if( i>0 ) {
do {
}
while( --i );
}
document.getElementById("time-4").innerHTML = new Date().getTime() - time4;
}
</script>
<style type=text/css media=screen>body {
FONT: 80%/1 Helvetica, Verdana, Arial, sans-serif
}
</style>
<meta content="MSHTML 6.00.5730.11" name=generator></head>
<body>
<h1>JavaScript loop speed test</h1>
<p>Loops through 10000 <code>div</code> elements in different ways. The time required for each loop is presented below in milliseconds.</p>
<input id=start-test type=button value="Start test">
<h2>Loop: for (var i=0; i<divs.length; i++)</h2>
<p id=time-1></p>
<h2>for (var i=0; divs[i]; i++)</h2>
<p id=time-2></p>
<h2>for (var i=0, il=divs.length; i<il; i++)</h2>
<p id=time-3></p>
<h2>for duffs method </h2>
<p id=time-4></p>
</body></html>
