CODEWITHSUNDEEP
javascriptinternet-explorerperformance
Vilx-
Vilx-

Reputation: 106920

Internet Explorer Javascript performance problem

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. :)

Upvotes: 5

Views: 5742

Answers (3)

Kamiel Wanrooij
Kamiel Wanrooij

Reputation: 12404

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

Upvotes: 1

Rich
Rich

Reputation: 671

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

Upvotes: 4

Kamiel Wanrooij
Kamiel Wanrooij

Reputation: 12404

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

Upvotes: -2

Related Questions