[CLOSED] Slow form render time

[Inoventus]

Hello,

a form that is central to our application is taking a long time to render in the browser (IE8). Client side hooks for timing (rendering start with ResourceManager1.RegisterBeforeClientInitScript(), rendering end with ResourceManager1.Listeners.DocumentReady.Handler() ) indicate that the form takes about 2.5 seconds to render. I would like to cut that number to below 1 second. The whole Ext.NET stack is still somewhat opaque for me in terms of performance optimization, how can I approach this problem?

AFAIU, most of the heavy-lifting is done by the code in the referenced extnet-init-js script (in our project initScriptMode is set to Linked). I am attaching the contents of the script for the form in question. The HTML document is also attached, although it's not that interesting. Could you have a look and give some suggestions? Thanks.

[Daniil]

Hi Inoventus,

175 KB of scripts...I think it's too much for IE.
Did you try your code in other browsers (FF, Chrome)? What time?

[jchau]

It may help to post a screenshot of what the form looks like after rendered. Sounds like you are just squeezing too much into one form.

[geoffrey.mcgill]

Hi,

First thing I noticed is you're using <table>'s for the layout of some components. By replacing those <table>'s with Layout components or better yet, setting the .Layout property, you should see some improvement in the rendering. I'd start with that.

The performance of policyScript.js and insuranceCalculator.js would be an unknown.

[Inoventus]

A screenshot of the form is attached.

[Daniil]

Hi Inoventus,

Please clarify do you set the TabPanel's DeferredRender to false?

If yes I would suggest you to consider a possibility of using a TabPanel with

DeferredRender="true"

in addition to the @geoffrey.mcgill's recommendation of using layout manager instead of <table> markup.

[Inoventus]

Hi,

First thing I noticed is you're using <table>'s for the layout of some components. By replacing those <table>'s with Layout components or better yet, setting the .Layout property, you should see some improvement in the rendering. I'd start with that.

The performance of policyScript.js and insuranceCalculator.js would be an unknown.

Thanks for your response. We'll try to take a stab at removing the <table> elements, although it's not a trivial task to generate an equivalent layout using Layout components.

policyScript.js and insuranceCalculator.js shouldn't pose any performance problems.

[Daniil]

Hi,

Hope this example will help you.
https://examples1.ext.net/#/Layout/T...ple_in_Markup/

Also if you will have a problem that you can't to resolve we are at your service.

[Inoventus]

Hi,

Hope this example will help you.
https://examples1.ext.net/#/Layout/T...ple_in_Markup/

Also if you will have a problem that you can't to resolve we are at your service.

I just made an experiment and simply stripped all <table>, <tr> and <td> tags. Rendering time indeed went down by about 0.25 seconds, but I suspect it would probably go up a little, even if less, when implemented using TableLayout. I think I'd rather go for lower-hanging apples at this point.

For what it's worth, your support is great! I will sure be asking more questions soon as we try to work on optimization of this form.