ListGrid - slow rendering in IE

[sgiurgiu]

Hi,
I am using SmartGWT 1.0b2 in my application. The main page of the application shows a listgrid with around 15 columns. I load the objects manually from the server (via GWT, and then create ListGridRecord objects). Currently I have around 50 rows in the grid.
When testing the application with IE, the simple act of highlighting the row the mouse is over eats up 50% of the cpu (actually i think it goes to 100% on one core). In firefox and chrome its lightning fast.
Now, after some reading on these forums, it seems like an AV could be to blame here. However, since the application will be internal, and the IT policy is for everyone to use IE and AV(can't even disable it via normal methods), I have to find a solution to make the IE rendering as fast as possible.
I do not have any overrides i my code (cellcss or the like.). ListGrid selection is set to single.
Anyhow, I do have a small number of rows in my grid (unlike other people who were doing tests with over 100k).

I saw an earlier post of Isomorphic, saying to look at the "performance" group of properties of ListGrid and TreeGrid.
Where are they listed? What can I do to improve performance in IE in particular?

Thank you for your suggestions.
P.S. Using IE 7 (if it matters)

Edit:
Will it provide any kind of improvement if I would use a datasource instead of creating and setting the records myself?

[Isomorphic]

Hello sgiurgiu,

It's not clear whether the problem is actually antivirus. If you can, try the application from a machine that doesn't have AV installed (perhaps a home machine) or try similar samples at SmartClient.com - the code is editable and you could quickly create 15 dummy columns.

What AV product is involved here, by the way?

Also, you mentioned 50% CPU, but is the interaction actually slow or does it just seem to you to be eating too much CPU?

[sgiurgiu]

We have on our corporate computers some Symantec AV (doesn't seem to be the normal Norton Antivirus, its certainly an extended product. Same quality however...how else can it be famous :( ).

The 50% CPU consumed by iexplore.exe (as reported by task manager) i believe comes from 1 core (as I have an 2 core CPU) that is running at 100%.
That amount is reported as i move the mouse over the grid, and the row under the cursor gets highlighted.
The same lag i can see even running the samples with IE, but much lower. Still, noticeable. In my app however, is worse.

Selecting a row, has half a second lag (between click-ing the mouse button and the row getting selected).
At the beggining I thought it may be my fault as I was returning a list of objects from the server, then creating ListGridRecord[] array from that list, using a fraction of the properties available, then calling setData(ListGridRecord[]) on the grid.
Every record also had a copy of the actual object returned from the server, as an additional (not displayed) attribute. And the object is...quite big.
That is handy, but not required however. So I tested without the actual object stored in memory, just the attributes. Also tested with a light object returned (only setting the properties I knew I will show in the grid), to save memory.
Nothing helped :(. And only on IE :(.

I will test now however with other machines, without AV, hopefully I can find the cure.

Thanks for the help so far.

[Isomorphic]

Hi sgiurgiu,

Thanks for the update. If you narrow it to down this AV product, we'd be happy to work with you to get Symantec to fix their product.

[sgiurgiu]

Hi,
I've done some testing yesterday, and unfortunately is not he AV. It's the IE.
Both IE 7 and 8 exhibit the same behavior.
In hosted mode in GWT it's expected somewhat, but in compiled mode, not really.
I have also tested with a sample from the showcase. Same thing: in Firefox it works lightning fast, in IE (both 7 and 8) its slower (albeit faster than my own app, still slower than Firefox).
So, I am wondering how can I customize (cut features out) the ListGrid so that it will render faster in IE? Number one feature that I would cut would be the "on-hover" row highlight. I've been inspecting the grid with Firebug, nothing caught my attention. Will look harder , in the .js files as well.

Thanks for any pointers.

[mihai007]

could it be related with the graphic drivers?
I mean after all this is 2D and it could be that IE passes more to the graphic drivers/cpu in a different way than Firefox does it.
For example I remember that at least on linux incorrect installation of graphic drivers makes gmail very very slow to use.

[sgiurgiu]

Hi,
Hmm, the graphic drivers. Never thought of that. Could be I guess, but there's nothing I can do about that :(.

I have changed my grid so that now its using the GWTDataSource posted here on this forum, and I am happy to report that the speed has increased substantially, (5-10 times faster) with the same amount of data. Sill laggish in IE (as usual) but much better.

So, with a datasource, there must be something going on internally in the grid that makes it faster to render (caching?). Some properties must be set in there, when setDatasource is called.

Thanks for the help thus far.

[Isomorphic]

We'd expect the graphics drivers to generally influence all browsers.

There shouldn't be an interactivity difference in the ListGrid based on what DataSource type you're using. In switching over, you may have inadvertently changed some other setting, like setShowAllRecords(true), that has a performance impact?

It's still suspicious that you would have any noticeable delays at all in IE7, that's not normal. If you get a chance to try a machine that isn't specially configured for use inside your organization, we're curious to see if your experience goes back to normal.

[sgiurgiu]

I tried the showcase on my home machines (haven't before). One with IE8 and another with IE7. Same behaviour everywhere, with IE. Firefox: snappy, IE:a bit laggier.

The main example that I've tried from the Showcase was the "Live Grid" sample from the "Featured Samples" section, as it's fairly simple.

The sample however (expected, since its just loading a simple XML), is certainly much faster than my own application, where the records contain a bit more info. But the amount of columns and the amount of rows is certainly (so far) the same.
Here is my initialization code of the grid:

pcsGrid = new ListGrid(){
		  protected String getCellCSSText(ListGridRecord record, int rowNum, int colNum) {  
             Integer value=record.getAttributeAsInt("daysTillLaunchField");  
             if (value <0) {  
                 return "color:red;";                     
             } else {  
                 return super.getCellCSSText(record, rowNum, colNum);  
             }  
         } 		
	};
	
	pcsGrid.setCanDrag(false);
	//pcsGrid.setSmoothFade(false);
//	pcsGrid.setShowHover(false);
//	pcsGrid.setShowTreeColumnPicker(false);
//	pcsGrid.setAlternateRecordStyles(true);
//	pcsGrid.setDrawAllMaxCells(0);

	//pcsGrid.setShowAllRecords(true);
	pcsGrid.setHeight100();
	pcsGrid.setSelectionType(SelectionStyle.SINGLE);

        pcsGrid.setDatasource(pcsDatasource);

The commented lines are from when I've tested various options/settings.
Nothing worked.with or without them set. true/false..doesn't matter.

[Isomorphic]

Different browsers are faster and slower at certain operations, and this is expected. In some things IE is the fastest.

Note sure if your expectations are different, but testing the Showcase Live Grid example on a laptop with IE6 (much, much slower hardware/software combo), certainly one can see a difference with how closely the rollover effect follows the mouse, but there's no behavior that would interfere with efficient use of the application.

Bear in mind also that the LiveGrid example shows a lot of cells, and is embedded in the Showcase, which is basically a monstrous uber-application containing 250 mini-applications. So it's a bit of a worst case scenario, and performs fine on all test machines we have.

[Przemeq]

I have identical problem with IE and Live Grid, I can't use it on IE (7&8) becouse of it's speed. So I'm using firefox or chrome.
I't doesn't matter what is app size, every livegrid is very slow on IE

[sgarcianovoa]

We've found the same problem with IE 6/7. We've found that the problem increases as the number of columns increases. With three columns the hover lag is almost nonexistent. But as the number of columns raises (our grids could have 27-20 columns) the hover lag is terrible. Could be possible that assigning image hover style for each cell (td) instead of assigning for each row (tr) makes ie render very poorly the grid?

Thank you in advance

[Isomorphic]

Possibly you guys have disabled caching. In the Showcase sample, try switching to TreeFrog skin, which does not use images for the rollover. If that improves things, you might take a look with Fiddler and see if your browser is sending hundreds of requests for the rollover image as you move between rows.

If this is the problem, it won't affect end users, who generally don't disable caching. But if you're concerned anyway, Enterprise offers a slightly less pretty series of Over/Selected etc grid states in the skin file - just setBaseStyle("tallCell").

[sgarcianovoa]

Thank you for your fast reply, but that's not the case. We've loaded the app, disabled network connection and the hover image loads as slow as before. And treefrog skin is as slow as enterprise one.

[Isomorphic]

@sgarcianovoa That's actually not a correct test. Yanking the network cable just means that if IE is making requests for the image, they fail, and it uses the image it has cached. This would have just as large of a performance impact on interactivity as actually making requests to a remote server.

We have dozens of machines here not exhibiting this problem so it's definitely worth checking your cache settings and looking at Fiddler.

Note that for IE6 in particular, there's an IE caching bug that could be affecting you:


http://mail.google.com/support/bin/answer.py?hl=en&answer=14106.