PDA

View Full Version : Low performance grid



ddanny
7 Dec 2009, 11:00 AM
I have the following issue while using the com.extjs.gxt.ui.client.widget.grid.Grid widget: it seems like the performance is really low.

The grid I build has 3 columns, the cells on the first 2 having text, while the third is populated by some small colored squares.
A setInnerHTML() is called at some moment for each cell in this column and up to 200 small squares defined like below fit in each cell. There can be around 100 such rows in a grid.


<a title="" href="" target="_blank" class="color-969696 x-color-mbox1"><em><span style="background:#969696" unselectable="on"> </span></em></a>
So, the number of these small squares can be really big. The problem we have is that while this grid is displaying, the performance of the entire application is really slow.
I imagine this can be caused by the browser repainting the content of the grid? On Firefox the performance is much lower than in IE.

Of course, if we reduce the number of such squares to just a few 1000s, the performance improves proportionally.

Are there any tweaks we can try in order to improve this?
Is there a way to make the content of the grid repainting only is some conditions? Or have it repaint only the visible parts?

Regards,

Dan

dpope22
8 Dec 2009, 7:24 AM
You can try to set the View of your grid to a BufferedView. This view will only render("paint") the rows that are visible.

Arno.Nyhm
9 Dec 2009, 8:52 AM
other idea is to use a button to display the color palette only on demand like in this case:

http://www.extjs.com/forum/showthread.php?t=86824&highlight=button+grid

an other idea is to reduce the generated html code of your sample. you realy need the a and the em tags?

ddanny
11 Dec 2009, 9:27 AM
Thank you both for the suggestions.
I have followed them both. It looks like there are some issues with the BufferView in Firefox. It seems like the row height is not automatically increased when the content doesn't fit.
I am calling setForceFit(), but the same result. It works fine with IE, but not with Firefox.

Does anyone has an idea?

Regards,

Dan

dpope22
11 Dec 2009, 9:55 AM
BufferView has a couple of restrictions that the GridView does not. It requires a constant height for all rows in your grid, and according to the API, it doesnt allow for expanding rows. I'm using BufferView with constant row height and its working for me FF, IE, and Chrome.

ddanny
11 Dec 2009, 9:59 AM
Actually, it looks like it does expand the row height in IE, but not in Firefox. At least this is how it behaves for me. I would like to make it somehow to behave in FF the same as in IE.

Dan

Arno.Nyhm
15 Dec 2009, 6:16 AM
then use a fixed row height or not use the BufferView!

ddanny
15 Dec 2009, 8:00 AM
Great! Thanks a lot for your suggestion. It brings me back where I started and with no progress at all.

Dan

Arno.Nyhm
15 Dec 2009, 9:08 AM
then please describe your main goal what you try to show and show a screenshot. maybe other great ideas comes with more input from you.

ddanny
21 Dec 2009, 1:56 PM
Please see the attached screenshot. You can see a lot of small gray squares that change color based on some external input.
Seeing the amount in the screenshot and the scroll bar, you can deduce that there are around 10000+ such squares in that column of the table.

Using the regular Grid is really slow with so many squares, especially in Firefox, where it slows down everything.
Using the BufferView improves the performance when that window is not expanded (when a much smaller amount of squares are visible) but in Firefox again, there are always 2 rows for each line (or 2 lines for each table row), never less, never more, no matter how many squares I have, if they fit or not in 2 lines.

darrellmeyer
12 Mar 2010, 3:43 PM
you can deduce that there are around 10000+ such squares in that column of the table

I think you need to rethink your design. All the squares are creating way too many DOM elements and that is why performance is bad. Without knowing what your squares are trying to do it is hard to make suggestions.

You might consider using server generated images for the squares or you might consider using expanding rows and only show the squares when the row is expanded.

ddanny
13 Mar 2010, 3:26 AM
We have already updated the design such as now the squares are server side generated images. The performance is improved a little, but not as much as we need.
I think we are not going to follow your second suggestion because our users will want to see them all in the same time.

The_Jackal
14 Mar 2010, 4:04 PM
I don't know it this will help, but we make sure that we do everything we can to a store and grid separately and only add the store to the grid at the last reasonable moment. The same goes for updating the grid: I always create a new store and re-add it to the grid.

HTH,
Carl.