Hybrid View

  1. #1
    Sencha User rabelanger's Avatar
    Join Date
    Jan 2010
    Location
    Montreal
    Posts
    15
    Vote Rating
    1
    rabelanger is on a distinguished road

      0  

    Default Unanswered: TreePanel performance issue

    Unanswered: TreePanel performance issue


    Hi,

    I'm having performance issues with the treepanel and I'm not loading huge amount of data. The treestore loads about 200 nodes (calls are < 100 ms), which are all child of the root node. It take a good 4-5 seconds to render the nodes in the tree. I was wondering if anybody came across a similar problem using the treepanel.

    Here is what im doing

    Model:
    Code:
    Ext.define('Dash.model.air.Airport', {
        extend : 'Ext.data.Model',
        idProperty : 'id',
    
        fields : [{
            name : 'id',
            type : 'int'
        }, {
            name : 'text',
            type : 'string'
        }, {
            name : 'iconCls',
            type : 'string',
            defaultValue : 'other-mn-bullet'
        }, {
            name : 'loaded',
            type : 'boolean',
            defaultValue : true
        }, {
            name : 'expanded',
            type : 'boolean',
            defaultValue : true,
            persist : false
        }]
    });
    Store
    Code:
    Ext.define('Dash.store.air.Airports', {
        extend : 'Ext.data.TreeStore',
        storeId : 'Airports',
        model : 'Dash.model.air.Airport',
        autoLoad : false,
    
        root : {
            text : 'root',
            id : 'src',
            expanded : true
        },
    
        proxy : {
            type : 'direct',
            directFn : AirportWS.GetAirports,
            reader : {
                type : 'json'
            }
        }
    });
    View
    Code:
    Ext.define('Dash.view.air.AirportTree', {
        extend : 'Ext.tree.Panel',
        alias : 'widget.airportTree',
    
        width : 150,
        border : false,
        rootVisible : false,
        animate : false,
        useArrows : true,
        singleExpand: false,
    
        store : 'air.Airports'
    });
    To load:
    Code:
    this.getTree().getEl().mask('Loading..');
    
    //load the tree
    this.getTree().getStore().load({
          scope : this.getTree(),          
          callback : function(result) {    
             //remove the loading mask
             this.getEl().unmask();
    
             //update the airport count title
             this.setTitle('Airports (' + result.length + ')');
        }
    });


    Here is a screenshot of speedtracer





    I've used treepanel in the past (Ext 3) and I never had any problems. Note that I'm using the sandbox build for Extjs 4 (4.1.1), but all other components are working good. Any help would be great.
    rafael

  2. #2
    Sencha User
    Join Date
    Jun 2012
    Posts
    2
    Vote Rating
    0
    blutz is on a distinguished road

      0  

    Default


    I have the same problem here, but I have to load even more records into the store.

    I think this is because every record has to be decorated with the node interface.

    Have you found a solution for this?

  3. #3
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Vote Rating
    6
    Answers
    5
    yyogev is on a distinguished road

      0  

    Exclamation I have the same problem with big tree performance

    I have the same problem with big tree performance


    My application has a tree panel where the path to specific node can be displayed on page load.
    When this is done, the load can take 6-8 seconds with big trees.
    I am using selectPath (expandPath + select node), which does calls to fetch nodes along the way, so I tried to see if fetching all the required nodes in a single AJAX call will help. There was no noticeable difference, so I concluded that the problem was with the rendering of the nodes.

    I really wish there was some way to speed up this phase.
    Yaron Yogev

    IT Software Developer

  4. #4
    Sencha User rabelanger's Avatar
    Join Date
    Jan 2010
    Location
    Montreal
    Posts
    15
    Vote Rating
    1
    rabelanger is on a distinguished road

      0  

    Default


    Quote Originally Posted by yyogev View Post
    My application has a tree panel where the path to specific node can be displayed on page load.
    When this is done, the load can take 6-8 seconds with big trees.
    I am using selectPath (expandPath + select node), which does calls to fetch nodes along the way, so I tried to see if fetching all the required nodes in a single AJAX call will help. There was no noticeable difference, so I concluded that the problem was with the rendering of the nodes.

    I really wish there was some way to speed up this phase.
    You said the load takes 6-8 seconds? Your server side logic needs to be optimized as ExtJs isn't responsible to building the response but rather just rendering it. When you look at your web console, how long does your request take from start to end?

    Ive had issues with treepanel rendering. My AJAX resquest would take (> 200ms) but the treepanel would take 2-3 seconds to render once the treepanel already had nodes in it (250 nodes). It seems as it emptying or filling the treepanel is a costly operation.
    rafael

  5. #5
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Vote Rating
    6
    Answers
    5
    yyogev is on a distinguished road

      0  

    Default


    Using web server on my local machine, which is a rather standard PC burdened with IDE and other UI, the server side call (Perl FastCGI) took (as seen in Google Chrome developer tools panel 'network' tab:
    - waiting: 118ms
    - receiving: 351ms

    I had a hard time figuring the time it takes to do the drawing of the tree. I looked at the timeline recording of the loading, and I noticed that there is a lot of network requests for images repeating, each taking in the order of 1ms, al due to latency, and it says it was taken from the cache. I have a feeling that I could probably fix this by configuration, but I'm not sure why.
    All this image fetching fest last from 3.69s to 8.05s in the timeline. After that I see a lot of style reculation & layout but it actually lasts from 9.35s to 9.83s.

    B151095_timeline_analysis.png
    Yaron Yogev

    IT Software Developer

  6. #6
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Vote Rating
    6
    Answers
    5
    yyogev is on a distinguished road

      0  

    Default


    The image request I get is for
    data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

    And this happens during my expandPath call.
    Yaron Yogev

    IT Software Developer