Hybrid View

  1. #1
    Sencha User berend's Avatar
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    46
    Vote Rating
    0
    berend is on a distinguished road

      0  

    Default ExtJS performance on large forms

    ExtJS performance on large forms


    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.

  2. #2
    Sencha User berend's Avatar
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    46
    Vote Rating
    0
    berend is on a distinguished road

      0  

    Default Better example

    Better example


    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.

  3. #3
    Ext User
    Join Date
    Apr 2010
    Posts
    2
    Vote Rating
    0
    sarathi17 is on a distinguished road

      0  

    Default


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

  4. #4
    Ext User
    Join Date
    Mar 2008
    Posts
    6
    Vote Rating
    0
    toolshed is on a distinguished road

      0  

    Default


    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.
    Code:
    	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

    Code:
    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

    Code:
    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

  5. #5
    Sencha User berend's Avatar
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    46
    Vote Rating
    0
    berend is on a distinguished road

      0  

    Default


    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.

  6. #6
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


    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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar