jQuery and DOM Manipulation Performance Issue in IE8

Question

I've developed a module at my work in JQuery, it is basically a table with the following functionality

• Cell level Edit
• Row level edit
• Drop n drop rows to change position
• Show/hide columns
• Column resize

every thing works fine on latest browsers like, FF9.0, IE9 and Chrome, but in older browsers like IE8 and FF3.6 as the number of rows in the table increases the performance of the page reduces significantly. I've tried many optimization from jQuery and DOM manipulation but still no effect on the performance. Any idea if I'm missing something or some tip to make the performance better i.e. to an acceptable level.

I haven't use any plugin, everything is my custom implementation. The javascript file is quite huge and I'm looking for some general good practices and tips.

Answer 1

There are two major ways to improve performance with large html pages - reduce the number of page reflows and reduce the number of handlers.

1. Reduce the number of page reflows

Every time you make a change to the DOM, it needs to redraw itself. This is a reflow. Keep these to a minimum by creating a string or DOM fragment with all your DOM manipulations, then inserting that into your page. This will trigger only one reflow. For example, if you're adding a table, create the whole table with text in it as should be, then insert that in a single operation.

JQuery allows you to create a DOM fragment like this:

var table = $('<table></table');

You can manipulate your fragment in the standard ways:

var line = $('<tr><td>Some Data</td></tr>');
line.css('color','red');
table.append(line);

Then when the fragment is complete, add it to the DOM in a single step:

$('body').append(table);

you will trigger only one reflow and the process will be orders of magnitude faster.

2. Reduce the number of handlers

If you have a lot of controls on each row, that's a lot of handlers. Instead create only one handler and attach it to the document root, then when it gets called inspect the target attribute to discover what to do. In JQuery you can use the new "on" handlers to do this, or else use the old "live" style handlers.

for example:

$('table td').on('click', function() {
  //do work here
});

Only one handler will be created which will handle all of the td click events.

Do both of these and you should see dramatically improved performance.

Answer 2

The bad news is, there's not really much you can do as it mostly depends on the javascript engine used in the browser.

If it's an option for you try Google's Chromeframe for IE8, but on a public website that's most likely not a very nice solution. But it can be in a corporate environment when users can easily update software.

You could also try to render the table on-the-fly:

Ao you got your table and you got an array with information in javascript (or pullable via ajax), plus you got informations about where you are in the table (row) and how long the table is (maxrows).

Then create a table that's only as big as the viewport, maybe a little bit bigger. Everything above and below the viewport is handled by a big <div> or anything that is streched to the height of remaining rows or rows before the topmost in-viewport row.

That way only a very limited number of dom-nodes is present at any time. It could possibly improve performance.

When the user scrolls remove table cells that are no longer in viewport (and add their height to the respective whitespace block of that side) and add table cells that freshly came into viewport (removing the height from the whitespace on that side).