Backbone.js performance on IE6 IE7 and IE8

Question

I am hitting performance bottlenecks for render a table of large results from Backbone.js sets on most versions of IE.

How have others got round this problem?

Is there anyway we can cache the output on these inferior browsers?

Answer 1

My guess is you are adding the rows to the DOM one by one. This is likely causing many many browser repaints, giving you the sensation of laggyness/slowness as the rows render.

The easiest way to increase speed is to limit your interaction with the DOM. Instead of inserting the rows into the DOM one by one, insert them all together.

Continue reading for an example of what I mean.

What NOT to do:

http://jsfiddle.net/skylar/arkxp/4/

In this example notice how I am adding the table to the DOM, before I add any of the rows. This is bad as it causes the browser to repaint 1000 times!

This is wrong:

this.table = $("<table></table>").appendTo("body");
this.model.each(this.addRow);

What you should be doing:

http://jsfiddle.net/skylar/arkxp/5/

In this example, I wait to add the table to the DOM until I have generated all the rows. This means the DOM only repaints once and should be much quicker than the above example.

This is correct:

this.table = $("<table></table>");
this.model.each(this.addRow);
this.table.appendTo("body");

This is true for any interaction you have with the DOM. The more you mess with it, the more it will slow down. In fact, it is often said that the quickest way to speed up you JS is to limit your interactions with the DOM

If you find yourself in a situation where you need to add something to an element already inside the DOM, simply set it to display:none or temporarily remove it from the DOM while you perform actions upon it. When you are all done, inject it back and you will have only forced a single repaint.

Once you get the hang of optimizing your DOM interactions, I think you'll find a lot of room for improvement in your app.

Modern browsers limit DOM repaints by caching your requests to update the DOM and doing the changes in "chunks". IE (and older browsers) will repaint on every change. This likely explains why your modern browsers are performing better, despite excessive DOM interaction.