Huge grid, about columns not lines

Hello all,

We have here some bad results with a huge grid. Not huge about the line numbers, but about a lot of columns (near 100).
Problem is clearly coming from client-side : loading bar is off and we even get the navigator’s warning : “a script is taking too long”.
Finally, if we wait enough time we have a fully working grid, but it takes (it depends on the hardware) up to 10 seconds to get it at the screen. Weird (but good!) is, after the load, response time is nice filtering and browsing content.

Not talking about reducing columns number, some tips to make it lighter and faster to display ?


I just found that :
But it’s quite old,…

Anyone can shed some light on this ?


Recently in Vaadin 7.7.6 there was new non-animated column resize mode added, which helps the resizing of the columns when there are many columns. That probably however does not impact much the initial loading. In case of having that many columns, I recommend not to have complex content in them.

Thanks for the tip about non-animated column, i’ll take a look.
Content is actually quite simple, no generated column nor specific renderer.

Columns first sizing seems to be the key : adding a fixed width and an expandratio=1 on each column makes the grid’s first display 2 x faster.
Strange thing is I have almost the same behavior as this old issue, that should have been patched more than one year ago : still 4 seconds to show up.

The issue is that although Grid re-uses elements vertically it does not do it horizonatally. This make Grid very efficient handling rows, i.e. only the visible rows are attached to DOM, which reduces burden to browser. However all columns are attached to DOM, which meanss browser needs to process more and more data as you keep adding columns.