TreePanel performance issue

[rabelanger]

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:

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

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

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:

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

performance.jpg

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.

[blutz]

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?

[yyogev]

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.

[rabelanger]

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.

[yyogev]

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

[yyogev]

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

And this happens during my expandPath call.

[yyogev]

After more examination, I see that it says aggregated time is 0.004ms for each such image loading call, meaning it all happens in the browser with no network traffic. However, it seems that due to the number of the calls this process does take a lot of time.

[yyogev]

For the record: the tree I did my test with contained 90 visible nodes in the expanded nodes.

[ag0rex]

The image that is being loaded is a placeholder image:

http://stackoverflow.com/questions/5316812/1-pixel-gif-as-a-new-measure-tool-o-o-blank-image-url-what-is-it-for

You can set this image with:

Ext.BLANK_IMAGE_URL = 'images/s.gif';

and the image will be cached.

[ajin]

I am facing a similar issue (in tree grid) where I see a lot of requests going to "data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==". However this image is already cached in Ext-more.js. Even though it is cached, I see that the status of the request is "pending" for a lot of these requests.
Can you please let me know how I can work around this?