[thelist] Using for loops with a twist

Tue Apr 3 06:42:23 CDT 2007

On 03/04/07, Christian Heilmann <codepo8 at gmail.com> wrote:
> > > But here comes the catch: While this is true with real JS arrays try
> > > it with a DOM nodelist and you will see that there is no speed
> > > difference between "my" method and the backward looping or two
> > > variable versions.

I turned it around, instead of "how long does it take?" I did "how
many can you do?".

I createad a UL with 30,000 LIs, then took some of the approaches and
measured how many I could loop through in 1/10th of a second.  (I've
pasted the code at the end).

I found using a constant, looping backwards and caching the value of
the length property to perform best, and about the same, in all
browsers.

Looping forwards was terrible in IE - 300 times slower, 250 times
slower in Opera, 3.5 times slower in Firefox.

You can't use the undefined keyword in IE5.5.  In IE6, it is twice as
slow as best.  In Firefox, the undefined technique was the worst.

The for-in loop doesn't work at all over the result of a
getElementsByTagName in Netscape and Opera.  Opera has 1 property,
item.  Netscape has 3, length, item and namedItem.

> Comparison:
> http://icant.co.uk/sandbox/forloops.html

I like the reference to The Prodigy!

-- 
Lee

----

  <body>
    <ul id="myUl" style="display:none"></ul>
    <script type="text/javascript">
      var ul = document.getElementById("myUl");
      for(var i = 0; i < 30000; i++)
      {
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(i));
        ul.appendChild(li);
      }

      var TEST_DURATION = 100;
      var results = "";

      var a = document.getElementsByTagName("li");
      var t, items;

      t = new Date(); items = 0;
      for(var i = 0; (new Date()-t) < TEST_DURATION; i++) items++;
      // Ignore these results, probably out of synch with clock
resolution.

      t = new Date(); items = 0;
      for(var i = 0; i < a.length && (new Date()-t) < TEST_DURATION;
i++) items++;
      results += "Forwards:\tItems:" + items + "\n";

      t = new Date(); items = 0;
      for(var i = a.length - 1; i >= 0 && (new Date()-t) <
TEST_DURATION; i--) items++;
      results += "Backwards:\tItems:" + items + "\n";

      t = new Date(); items = 0;
      for(var i = 0; i < 30000 && (new Date()-t) < TEST_DURATION; i++)
items++;
      results += "Constant:\tItems:" + items + "\n";

      t = new Date(); items = 0;
      for(var i = 0; a[i] !== undefined && (new Date()-t) <
TEST_DURATION; i++) items++;
      results += "Undefined (typed):\tItems:" + items + "\n";

      t = new Date(); items = 0;
      for(var i = 0; a[i] != undefined && (new Date()-t) <
TEST_DURATION; i++) items++;
      results += "Undefined (loose):\tItems:" + items + "\n";

      t = new Date(); items = 0;
      for(var i = 0, j = a.length; i < j && (new Date()-t) <
TEST_DURATION; i++) items++;
      results += "Variable cache:\tItems:" + items + "\n";

      t = new Date(); items = 0;
      for(var i in a){if((new Date()-t) >= TEST_DURATION) break; items++;}
      results += "For in loop:\tItems:" + items + "\n";

      alert(results);
    </script>
  </body>