Question

I have a page using JQuery and I’ve implemented infinite scrolling on a div. There is a text area on the page. I’ve noticed that as more rows get added to a table in the scrollable div performance of the page gets worse. You can really tell when the page size is large and you try to type anything in the text area because there is a large lag between the time text is typed into the textarea and the time that you actually see the text appear. This only happens in IE8. I haven’t tried other IE versions. It doesn’t happen in Firefox. It is really fast in Firefox.

I’ve used a tool to check what IE was doing and it is spending most of the time doing generic rendering of the page for each key stroke even though nothing new is being added to the page.

Why is the page rendering so often and slowly in IE8 and is there a way to improve this?

Answer 1

I believe that the tables are the cause of your performance issues. I had similar problems when using js to dynamically add rows to a table containing form elements.

See this Microsoft Article for tips on how to improve performance, specifically when using 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.

e.g.:

table
 {
 table-layout:fixed;
 } 

Avoid nesting tables within tables etc.

W3Schools highlights the advantages and disadvantages to using different table layout algorithms.

FireFox appears to handle the rendering of tables more efficiently than IE but using these techniques appears to help most browsers.

Hope this helps!