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



How to Help Your Business Become an AI Early Adopter

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