views:

1346

answers:

3

JavaScript performance in Internet Explorer sucks. No news there. However there are some tips and tricks to speed it up. For example, there is this three part series. Still I find myself unable to squeeze decent performance out of it. Perhaps some of you have an idea what else to do so it was speedier?

What I want to do is create a medium-size table from scratch in Javascript. Say, 300 rows, 10 cells each. It takes at about 5-6 seconds on my computer to do this. OK, granted, it's a 5 year old rig, but that's still too much. Here's my dummy code:

<html>
  <body>
    <script type="text/javascript">
      function MakeTable(parent)
      {
        var i, j;
        var table = document.createElement('table');
        var insertRow = table.insertRow;
        for ( i = 0; i < 300; i++ )
        {
          var row = insertRow(-1);
          for ( j = 0; j < 10; j++ )
          {
            var cell = row.insertCell(-1);
            cell.innerHTML = i + ' -  ' + j;
          }
        }
        parent.appendChild(table);
      }
    </script>
    <div onclick="MakeTable(this);">Click Me!</div>
  </body>
</html>

Added: Hmm, apparently string-concatenation (with array.join) is the only way to go. Well, sad, of course. Was hoping to do it the "proper" DOM-way. :)

A: 

You could try 'Duff's Device': Unwinding a loop by repeating the code a number of times:

for (var i = 0; i < count / 4; i++) {
  doSomething();
  doSomething();
  doSomething();
  doSomething();
}

Obviously this leaves the remainder when divided by 4, the original Duff's Device had a clever way of jumping to the middle of the loop using a switch statement mixed in with the loop. Javascript does not support this, but you could manually process the rest of your rows. Also the number 4 is random, the number itself can be derived by performance testing.

See also: http://www.websiteoptimization.com/speed/10/10-3.html

Kamiel Wanrooij
+2  A: 

Here is an interesting link I found when looking for an answer on this: The page uses five different scripts / methods to generate a table.
According to their tests, using strings is by far faster than using DOM / Table elements. http://www.quirksmode.org/dom/innerhtml.html

Rich
A: 

One of the main reason's for IE's performance issues are DOM operations. You want to do your DOM operations as efficiently as possible. This can include, depending on your situation (benchmark!):

  • Offline creation of your DOM structure; keep the top level element out of the document (create, but not append) then appending it to the document when it's ready, instead of appending every element into the DOM as you create it
  • write innerHTML instead of DOM manipulation
Kamiel Wanrooij
The first tip is already there. See - the table gets added to the DOM at the very end. I'm now exploring innerHTML and it indeed seems to be way faster.
Vilx-
Yes, I should have mentioned that. It is not always faster though, that's why I wanted to mention the 'Benchmark!' part :-)
Kamiel Wanrooij