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. 🙂
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