How to code HTML for fast rendering in IE

Question

Layout and rendering of HTML content can take some time if the HTML is complex enough. I couldn't find a set best practices for how to code HTML in order to help the layout engine (specially in IE) so that page redraws are faster. Does such a set of best practices exist?

My current specific problem is that my tabular data (in a table element) that causes drawing the page too slow, and making DOM updates (hover effects) and animations very sluggish. I'm sure it's not JavaScript performance. I've checked the page using dynaTrace AJAX. The CPU becomes too busy when I hover my mouse over elements, but there's no JS running. And the hover is realized by adding/removing a class to TR elements. I've also tried YSlow in Firefox, it doesn't show any particular issue. It's not network-related either. (Firefox lays out the page faster, but it's not because of its JS engine being faster)

Is there a tool to profile drawing and layout in IE, so that I can find out where the problem is coming from? And what can cause the drawing to be so slow, so that I can avoid them in HTML code?

Answer 1

Internet Explorer is known to be slow with rendering large HTML tables.

Refer to this nice article on MSDN: Building High Performance HTML Pages and specifically to the section about tables:

• Set the table-layout CSS attribute to fixed on the table.
• Explicitly define col objects for each column.
• Set the WIDTH attribute on each col.

Then there is also a nice blog post on the ieblog about table rendering: Table Rendering.

It comes down to this: Try to make the content within the tables less complex, i.e. set fixed width and don't have too much dynamic rendering action going on. IE first loads the content and then has to calculate the correct width for the contents == slow.