Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
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.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>
Kulkarni Vasudeva
 
Comment and Contribute

 

 

 

 

 


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

 

 

Sitemap