Remi's Array Loop Speed Test

by msgilligan

HTML

<a accesskey="1" id="start-test" href="javascript:startTest()">[1] Start test</a><br />
<table width=100% border=1>
<tr>
  <td>for (var i=0; i&lt;divs.length; i++) { }</td>
  <td id="time-1">&nbsp;</td>
</tr>
<tr>
  <td>for (var i=0; divs[i]; i++) { }</td>
  <td id="time-2"></td>
</tr>
<tr>
  <td>for (var i=0, il=divs.length; i&lt;il; i++) { }</td>
  <td id="time-3"></td>
</tr>
<tr>
  <td>for (var i in divs) { }</td>
  <td id="time-4"></td>
</tr>
<tr>
  <td>var il=divs.length;    while(il--) { }</td>
  <td id="time-5"></td>
</tr>
<tr>
  <td>var i=0; while(i&lt;divs.length) { i++; }</td>
  <td id="time-6"></td>
</tr>
<tr>
  <td>JQuery - $('div')</td>
  <td id="time-7"></td>
</tr>
</table>

CSS

html, body { font-family: sans-serif; }
table td { padding: 0.5em }

JavaScript

window.onload = function () {    
    for (var i=0, elm; i<100000; i++) {
        elm = document.createElement("div");
        elm.innerHTML = "Hej";
        elm.style.display = "none";
        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 + ' ms';
    
    var time2 = new Date().getTime();
    for (var i=0; divs[i]; i++) { }
    document.getElementById("time-2").innerHTML = new Date().getTime() - time2 + ' ms';
    
    var time3 = new Date().getTime();
    for (var i=0, il=divs.length; i<il; i++) { }
    document.getElementById("time-3").innerHTML = new Date().getTime() - time3 + ' ms';

    var time4 = new Date().getTime();
    for (var i in divs) { }
    document.getElementById("time-4").innerHTML = new Date().getTime() - time4 + ' ms';

    var time5 = new Date().getTime();
    var il=divs.length;    while(il--) { }
    document.getElementById("time-5").innerHTML = new Date().getTime() - time5 + ' ms';

    var time6 = new Date().getTime();
    var i=0; while(i<divs.length) { i++; }
    document.getElementById("time-6").innerHTML = new Date().getTime() - time6 + ' ms';

    var time7 = new Date().getTime();
    $('div');
    document.getElementById("time-7").innerHTML = new Date().getTime() - time7 + ' ms';
 }