Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

Tip of the Day
Language: XML
Expertise: Intermediate
Apr 27, 2009

Optimizing Loops in JavaScript

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.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;

<style type=text/css media=screen>body {

   FONT: 80%/1 Helvetica, Verdana, Arial, sans-serif


<meta content="MSHTML 6.00.5730.11" name=generator></head>


<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>
Kulkarni Vasudeva
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date