ExtJS performance on large forms

[berend]

Hi Guys,

Yesterday I encountered a show stopper in an applilcation with close to 400 fields. I've put up a sample application here:
http://www.berenddeboer.net/tmp/larg...rformance.html

It takes about 15 seconds to render this form. The actual performance in my application is even worse, more close to 30s, probably because the form is embedded in a tab panel inside a view port or maybe the page just has more elements.

The page loads fine if I set the property deferredRender to true of course. Lazy render is the key to get performance from such forms.

Unfortunately I cannot use that solution as I have to load data into this form. And that means all fields have to be rendered.

Does this mean that ExtJS is useless for forms over 50 elements or so? I hope not.

I think the clue to improve the load time of forms like this would be if I could load data in this form without having to turn deferredRender to false. As soon as a tab is rendered, the data is loaded into it. So somehow a reference to the data is being held, and used when the tab is displayed. Does anyone have code for this or suggestions to go about this?

I think faster rendering would probably be harder to fix than adding smarter loading. I profiled the rendering and about 50% of the times was taken up by three functions: addClass (called 4,000 times), byAttribute (called 64- times) and getStyle (called over 8100 times).

Any clues and tips really appreciated because at this point we have to abandon ExtJS for the project unfortunately.

Thanks,

Berend.

[berend]

Hi Guys,

I've put up a better example, with two buttons, so it's clear it's not the load time, nor the JS parse time that's the issue, but only the render time:

http://www.berenddeboer.net/tmp/larg...formance2.html

Do view source to see the JS. Tips appreciated!

Cheers,

Berend.

[toolshed]

I'm getting similar results with the load time. I'm not sure if you have tried Yahoo's Yslow.

Its reported that the Expires: header isn't working so the browser is reloading all the javascript each time. From my computer thats taking up at least 6 seconds. Its not a cure all, but it should help.

	3. Add an Expires header
These components do not have a far future Expires header:

    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/resources/css/ext-all.css
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/adapter/ext/ext-base.js
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/ext-all.js
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://extjs.com/s.gif
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/resources/images/default/panel/corners-sprite.gif
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/resources/images/default/panel/top-bottom.gif
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/resources/images/default/panel/left-right.gif
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/resources/images/default/tabs/scroll-right.gif
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/resources/images/default/tabs/scroll-left.gif
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/resources/images/default/tabs/tab-strip-bg.gif
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/resources/images/default/tabs/tabs-sprite.gif
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/resources/images/default/form/text-bg.gif
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/resources/images/default/form/trigger.gif
    *
      ParamsHeadersPost
      Response Headers
      Loading...
    * [HTTP headers]  (no expires) http://www.berenddeboer.net/tmp/ext-2.1/resources/images/default/button/btn-sprite.gif

Heres an example of how long it takes to load

toolshed@oogieboogie ~ $ date ; lynx -mime_header http://www.berenddeboer.net/tmp/ext-2.1/ext-all.js > /dev/null; date
Sat May 17 00:47:13 PDT 2008
Sat May 17 00:47:16 PDT 2008

Heres the mime headers

toolshed@oogieboogie ~ $ lynx -mime_header http://www.berenddeboer.net/tmp/ext-2.1/ext-all.js | head      
HTTP/1.1 200 OK
Date: Sat, 17 May 2008 08:01:43 GMT
Server: Apache/2.2.8 (Unix) mod_ssl/2.2.8 OpenSSL/0.9.7a PHP/5.2.5 mod_perl/2.0.2 Perl/v5.8.5
Last-Modified: Sun, 20 Apr 2008 16:05:10 GMT
Accept-Ranges: bytes
Content-Length: 523229
Cache-Control: max-age=7200
Expires: Sat, 17 May 2008 10:01:43 GMT
Connection: close
Content-Type: application/x-javascript

[berend]

That's why I put up the second version to avoid people thinking it's the load time. Unfortunately that is not the issue here.

Just try the second version and you'll see nothing is loaded this time or run it twice so you know it's in the cache and you'll see that doesn't really matter.

[devnull]

400 fields?? are you serious??
of course its going to be slow, and most likely create a very confusing user experience just in itself. Ext wraps fields with quite a few dom elements so you are creating a rendering nightmare for the browser.

[sarathi17]

hello berend,
I cant able to view ur form loading example, can u give me better example link for this.