JavaScript Speed Testing

by LyndseyB

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, len = divs.length; i&lt;len; i++) { }</td>
  <td id="time-2"></td>
</tr>
<tr>
  <td>for(var i = divs.length; i&gt;0; i--) { }</td>
  <td id="time-3"></td>
</tr>
<tr>
  <td>var i = divs.length; while(i--) { }</td>
  <td id="time-4"></td>
</tr>
  <tr>
  <td>var arr = new Array(100000); arr.forEach(function(i) { });</td>
  <td id="time-5"></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, len = divs.length; i<len; i++) { }
    document.getElementById("time-2").innerHTML = new Date().getTime() - time2 + ' ms';
  
    var time3 = new Date().getTime();
    for(var i = divs.length; i>0; i--) { }
    document.getElementById("time-3").innerHTML = new Date().getTime() - time3 + ' ms';
    
    var time4 = new Date().getTime();
    var i = divs.length;
    while(i--) { }
    document.getElementById("time-4").innerHTML = new Date().getTime() - time4 + ' ms';
    
    var time5 = new Date().getTime();
    var arr = new Array(10000);
    arr.forEach(function(i) { });
    document.getElementById("time-5").innerHTML = new Date().getTime() - time5 + ' ms';
    
 }