How to optimize the load and rendering of a huge page with hundreds of Layouts and FormItens

[ceravolo]

Hi,

In our system there is a page that has hundreds of FormItens and layouts.

It is taking a long time
I already changed to load to load (more than two minutes), including some messages with the "the script in this page is taking too long...".
each layout with schedulledDeferred, and now the page opens and shows the first layout in 10 seconds, but for finish loading all the page, it takes the same 2 or more minutes.

I found a post in Isomorphic blog with some tips from the experts to get a faster webapp, and one tip is this:
"1) Disable autoDraw and explicitly draw only the outermost container to avoid repeatedly redrawing components as the UI is assembled into its final state."

How can I do this? I didn't found where to disable autoDraw in Layouts. I just found a addChild() in the Canvas that has a boolean autoDraw parameter, but not in the Layout class. Nevertheless, I've tried to change from Layout to Canvas, and all the widgets are still being draw directly (one above the other, since Canvas has no layout control), and is still taking a lot of time to finish loading all widgets.

don't know how to "explicitly draw the outermost container".

Is there any other tips to improve the loading time of a huge page?

Thanks!

[Isomorphic]

This tip applies only to SmartClient, not SmartGWT.

Your basic problem here is trying to draw too much at once. An end user can't realistically interact with "hundreds of FormItems" at once, so from a User Experience as well as from a performance perspective, you should break the form up via a TabSet or SectionStack, which means that form sections that aren't immediately shown don't need to draw until they are shown.

Similarly, it sounds like your page badly misuses Layouts. We often find anti-patterns like having Layouts that contain exactly one child, in which case the layout is unnecessary. Or, Layouts are used just to create space, where LayoutSpacers or CSS padding would do the job without any extra DOM elements and nesting.

If you need help optimizing your page, consider our Consulting services. We've taken many poorly performing pages and fixed them by applying best practices.