dcsimg
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

WEBINAR:

On-Demand

Building the Right Environment to Support AI, Machine Learning and Deep Learning


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
Thanks for your registration, follow us on our social networks to keep up-to-date