Performance of GridStack rendering

[Artgit]

Hi,

I have posted a next question at StackOverflow http://stackoverflow.com/questions/38677582/vaadin-7-component-lazy-loading-for-performance-improvement?noredirect=1#comment64769065_38677582 about my Vaadin view rendering speed.

In case of ~10 elements in my main GridStack container the rendering time is pretty close to normal but I need to handle ~80 nested elements in this GridStack container.. and in this case my page renders ~15-20 sec

Is any solution I can use in order to improve page rendering speed in this case ?

Thanks.

[alump]

Initial render time? Or is updating also slow?

Try to use CSSLayouts inside GridStackLayout to improve speed. Any Vertical/Horizontal/GridLayouts will cause slowness fast inside dynamic layouts.

Please provide your component hierarchy structure.

[Artgit]

Only initial render time.. once the screen is rendered everything works pretty close to good

[Artgit]

This is my component hierarchy structure:

[alump]

Try to get rid of layouts with only have one child.

Eg. you have many VerticalLayouts with just one HorizontalLayout as child. Why not remove the unneeded vertical layout. If you need to do some wrapping, use CSSLayout.

Vertical/Horizontal/GridLayout do some JavaScript based delayed layouting. So more you have those, slower it gets.

[Artgit]

Thanks for your answer! As you can see at the picture below - I have replaced nested layouts of GridStack with CssLayout:

but the performance still pretty much the same as bad :(

[alump]

So no measurable difference?

[Artgit]

Unfortunately I don't know how to measure exact time of client side rendering with Vaadin but visually I can't see any major difference.. the rendering still takes a lot of time.

With 10 elements inside of central GridStack my view renders pretty fast.. but with 80 elements pretty slow..

[alump]

If you only have csslayouts with images, links, labels and buttons there, then I'm not quite sure what makes it so slow.

Would help if you could create simple code example, that I could use to reproduce the issue.

[Artgit]

I noticed right now that different buttons/links/images creation inside of elements that are placed inside of GridStack make it slow. I have disabled a few types of buttons/links and this improved the performance of view rendering. Right now performance is not perfect but much better. How buttons can affect performance ?

[Artgit]

I have sent you a demo project. Thanks !

[alump]

I have to try it out

[Artgit]

Thanks for your help! I'm really stuck right now with this performance issue of my application :(

[rami-alloush]

Are there any recommendations regarding this?