Page 2 of 7 FirstFirst 1234 ... LastLast
Results 11 to 20 of 61

Thread: Very slow Tab Panel performance vs 3.4

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-3283 in 4.1.0 Sprint 1.
  1. #11
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    31
    Vote Rating
    1
      0  

    Default

    Did this get an internal issue #?

  2. #12
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    31
    Vote Rating
    1
      0  

    Default

    Bump.

  3. #13
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    31
    Vote Rating
    1
      0  

    Default

    Has anyone else run these examples? Did you experience a slowdown?

  4. #14
    Sencha User
    Join Date
    May 2011
    Posts
    92
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by blakel View Post
    Has anyone else run these examples? Did you experience a slowdown?
    you are not alone, I am also experiencing poor performance. switch time dependents on the target tab, how many components and how complexity the layout it is.

  5. #15
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    198
    Vote Rating
    1
      0  

    Default

    Hi,

    I'm not affected by this at the moment, but I had a look into this.
    I'm not using the jquery adapter, rather than ext-base.js (add my changed sources later).

    The loadtime of both versions feels the same.
    The Ext.3.4 Version seems to have a layout problem or whatever (no floating toolbar, panel with forms visible only after first click).

    But then I started clicking though the tabs. The feeling, between my finger click down the mouse button and the tab is going active is long. Checked against the 3.4 version and I didn't had this impression.
    Now I needed to have a deeper look and used chrome speedtracer. The event running times are higher, which could confirm the longer duration to activate a tab.

    This are not really arguments to confirm that this is a bug. Its more a additional description for sencha devs.


    So here are some screenshots:

    - how does it look after first load with 3.4
    view-3.4.jpg
    - how does it look after first load with 4.0.2a
    view-4.0.2a.jpg
    - speedtracer loading time 3.4
    speedtracer-3.4-ext-base-adapter_load.jpg
    - speedtracer loading time 4.0.2a
    speedtracer-4.0.2a_load.png
    - speedtracer click 1 to 10 - 3.4
    speedtrace-3.4.0_click-1to10.jpg
    Last edited by Nickname; 22 Jun 2011 at 6:11 AM. Reason: forum software is super!

  6. #16
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    198
    Vote Rating
    1
      0  

    Default

    - speedtracer click 1 to 10 - 4.0.2a
    speedtrace-4.0.2a_click-1to10.jpg

    Sources

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
      <
    title>Sectioned Panel Test</title>

        <
    link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
     
        <
    script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
        
        
        <script type="text/javascript">
        //<![CDATA[
        Ext.onReady(function() {
            
            var itemNumber = 0;
            var createItems = function() {
                var items = [];
                for (var i = 0; i < 5; i++) {
                    items.push({
                        xtype: 'textfield',
                        fieldLabel: 'Text ' + itemNumber++
                    });
                }
                return items;
            };
            
            var panels = [];
            
            for (var i = 0; i < 100; i++) {
                panels.push({
                    title: 'Panel ' + i,
                    layout: 'form',
                    autoHeight: true,
                    items: createItems()
                });
            }

            var panel = new Ext.TabPanel({
                title: 'Sectioned Panel Test',
                width: 900,
                renderTo: Ext.getBody(),
                items: panels
            });
        });
        
        //]]>
        </script>
        
    </head>
    <body>
    </body>
    </html> 

    And for Extjs4:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
      <
    title>Tab Panel Test</title>
        
        <
    link rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css" />
        <
    script type="text/javascript" src="ext-4.0.2a/ext-all.js"></script>

        
        <script type="text/javascript">
        //<![CDATA[
        Ext.onReady(function() {
            
            var itemNumber = 0;
            var createItems = function() {
                var items = [];
                for (var i = 0; i < 5; i++) {
                    items.push({
                        xtype: 'textfield',
                        fieldLabel: 'Text ' + itemNumber++
                    });
                }
                return items;
            };
            
            var panels = [];
            
            for (var i = 0; i < 100; i++) {
                panels.push({
                    title: 'Panel ' + i,
                    items: createItems()
                });
            }

            var panel = new Ext.tab.Panel({
                title: 'Sectioned Panel Test',
                width: 900,
                renderTo: Ext.getBody(),
                items: panels
            });
        });
        
        //]]>
        </script>
        
    </head>
    <body>
    </body>
    </html> 


    Sorry for two posts. This forum SW is driving me nuts. Could not upload all images in one set. And later could not add a single image.

    Hope, everything is in order and readable

  7. #17
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    31
    Vote Rating
    1
      0  

    Default

    Yes, the slowness is not as apparent in newer browser versions (although there is still a noticeable delay in them that wasn't there in 3.4).

    However if you run the 4.0.2 example in IE8 the tab panel becomes effectively unusable for any consumer product (ie. consumers of products written using ExtJS 4) where IE8 is a large percentage of the install base.

  8. #18
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,615
    Vote Rating
    54
      0  

    Default

    Is it tab switching which is slow?

  9. #19
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    31
    Vote Rating
    1
      0  

    Default

    Yes tab switching is slow, but also render time is very slow in certain browsers.

    In 3.4 when you click a tab the tab gets the visual highlight immediately and the corresponding panel is immediately shown. In 4.0.2 there is a delay updating the visual indication of what tab is active as well as showing the corresponding panel.

    In IE8 there is also a very big difference in page render time. From the time you refresh the page to the time the page is render and able to be interacted with is about 8 seconds in my tests with IE8. In 3.4 this load time is only about 2 seconds. These tests were done from a local web server so there is no network delay affecting the results.

  10. #20
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Arlington, VA
    Posts
    33
    Vote Rating
    3
      0  

    Default

    I'm seeing a slow down as well. I have added blakel's tests to my web server. Chrome and Firefox are mostly passable although it feels a bit sluggish. IE (6,7,8) is fine in the 3.4.0 version but it lags in the 4.0.2a version.


    Debug versions:


    A cursory glance at the code shows that Ext 4 is using buttons for the tabs and I think Ext 3 used list items. It looks like every time the tab is switched in Ext 4 all of the tab buttons are going through a layout cycle. Then again I'm no expert so it could be something else.

Page 2 of 7 FirstFirst 1234 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •