GWT & IE8 cause a very laggy table-behavior

Question

Hello everyone,

I've yet another question. I'm working with GWT 2.0.4 and IE8 as well as FireFox (the latter only for comparison purpose). My application needs to load data and show it inside a table. There are about 60 columns and 150 rows to show.

Since the loading is dynamic - as soon as a dataset has been fetched, it's added to the table - I'm fine with slowdowns during loading process. However: when the table is completely loaded, I'd expect it to be pretty snappy and let me scroll it without much lag.

While the loaded table reacts in FireFox pretty good - it stays very responsive - Internet Explorer 8 is causing me a lot of headaches. In particular: as soon as the table finished loading and I try to scroll around or highlight a row, IE8 becomes VERY laggy and highlighting a row makes IE8 consume 50+% of CPU power.

I am not using any 3rd-party libraries and even displaying empty cells in a FlexTable still gives me the same issue.

I found some probably related issue here: http://stackoverflow.com/questions/1070856/smartgwt-listgrid-is-slow-but-only-in-internet-explorer . Unfortunately neither the issue there, nor the supplied links for SmartGWT solved my problem as I am not using SmartGWT. I do believe though that the problem is related.

Thank you very much and I'd be happy to try any suggestions.

Igor.

Answer 1

If it's possible (and your description of the problem suggests so), use Grid instead:

A rectangular grid that can contain text, html, or a child Widget within its cells. It must be resized explicitly to the desired number of rows and columns.

Have a look at bulk table renderers @ GWT Incubator for a comparison of these approaches (it's a little dated, but the point that FlexTable is slower than Grid still holds ;)). The "bulk rendered" tables from the incubator are also an option, however keep in mind that those widgets might not be maintained any more (and for example, contain bugs) - or are rapidly maintained :D But looking at the source might at least point you in the right direction, if you wanted to roll out your own solution to this problem.

Answer 2

highlighting a row makes IE8 consume 50+% of CPU power.

Maybe it's because you added mouse listeners to every row in your table. If so you could use :hover-pseudo-class in your css-files.

This article maybe helpful if you need to handle Events from a bunch of widgets in your table: http://code.google.com/intl/en/webtoolkit/doc/latest/FAQ_UI.html#As_the_application_grows,_event_handlers_seem_to_fire_more_slowl