Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: TreePanel very slow at loading & expanding ~250 nodes after ajax call to get nodes

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    261

    Default TreePanel very slow at loading & expanding ~250 nodes after ajax call to get nodes

    A call that before took 1-2seconds now it takes more than 10s.

    What can be done?

    The code that I am using now is:

    Code:
    loadTreeNodes: function(treePanel, nodes, selectedNode)
      {
        treePanel.setRootNode(nodes[0]);
        treePanel.el.unmask();
      }
    Before I had:

    Code:
    if (nodes.length > 0)
        {
          treePanel.initChildren(nodes);
        }
        else
        {
          treePanel.getRootNode().removeChildren();
        }
        treePanel.getRootNode().expand(true);
    This is a show stopper for me. I also found other posts related to this:

    http://www.sencha.com/forum/showthre...ulk-data/page2

    http://www.sencha.com/forum/showthre...-Buffered-Tree

    http://www.sencha.com/forum/showthread.php?132706

    Has this been fixed in the newer versions? I am using version 4.1.1. What can be done to make the tree faster?

    I am actually shocked because I read the new Ext Js 4 books (First Look, Ext JS in Action, second edition) and other articles and they all talk how the performance has been improved in Ext Js 4 and so on.


    Thanks

  2. #2
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    261

    Default

    I am coming back with a sample that was built using Sencha Architect (ExtJs 4.1.1) so you can see what I mean. The attached zip files includes everything, data as well. The actual number of nodes is approx 400 (I originally estimated the number of nodes visually and it was more conservative).

    The published code is under:

    TestTreePanelSpeed.zip\TestTreePanelSpeed\publish

    You need to open app.html and then click on the Load Tree button and see how long it takes to render the tree.
    Attached Files Attached Files

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    261

    Default

    I attached the equivalent of the other project but using ExtJs 3.4 and the TreeGrid component.

    I run this sample in Chrome and the treegrid loads the nodes in 2s.

    The previous one is displayed in ~ 7+s.

    I can live with 2s but not with 7-8s.

    This is Chrome, IE 9, which is the standard where I work, is even slower.

    I know there are other strategies, for instance I could load nodes asynchronously but it makes everything more complicated.

    Is there anything that I could do to make this faster under extjs 4?

    Thanks
    Attached Files Attached Files

  4. #4
    Sencha User
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default treePanel.setRootNode(nodes[0]);

    Hi @bogc,

    This helps a lot.
    Code:
    Ext.suspendLayouts();
    // batch of updates
    Ext.resumeLayouts(true);
    But, unfortunately, not in IE. It becomes better, but still not appropriate.

    I would also appreciate any thoughts of the community and ExtJS team on this issue.

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default

    Or, even
    Code:
    Ext.resumeLayouts();
    Layouting seems to be not required here.

  6. #6
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    261

    Default

    @Daniil: thank you for the tip, it helped tremendously.

    I tried my sample app in Ext Js 4.2 beta and the performance in IE 9/Chrome is worse!!

    I used the following code to do different measurements.

    In IE 9:

    Extjs 4.1.1:

    - Without the suspendLayouts/resumeLayouts it takes ~13.5s
    - With suspendLayouts/resumeLayouts it takes ~3-5s

    ExtJs 4.2
    -Without the suspendLayouts/resumeLayouts it takes ~22s
    -With suspendLayouts/resumeLayouts it takes ~5-7s

    In Chrome (23.0.1271.97 m)

    Extjs 4.1.1:
    - Without the suspendLayouts/resumeLayouts it takes ~4.6s
    - With the suspendLayouts/resumeLayouts it takes ~1s

    ExtJs 4.2
    -Without suspendLayouts/resumeLayouts it takes ~7.3s
    -With suspendLayouts/resumeLayouts it takes ~1s

    Code:
      onLoadTreeButtonClick: function (button, e, options) {
        //debugger;
        var treePanel = Ext.getCmp('treePanel');
        treePanel.el.mask('Loading...', 'x-mask-loading');
        Ext.Ajax.request(
        {
          url: 'data.json',
          method: 'GET',
          params: {},
    
          success: function onSuccess(result, request) {
            var nodes = Ext.JSON.decode(result.responseText).result;
            startTimeMs = new Date().getTime();
            Ext.suspendLayouts();
            // batch of updates
            treePanel.setRootNode(nodes[0]);
            treePanel.getRootNode().expand(true);
            treePanel.el.unmask();
            Ext.resumeLayouts(true);
            alert((new Date().getTime() - startTimeMs) / 1000 + 'seconds');
          },
          failure: function (result, request) {
            treePanel.el.unmask();
            Ext.net.DirectEvent.showFailure(result);
          }
        });
    
      }

    One note here, I could remove the treePanel.getRootNode().expand(true); statement since the expanded attribute is set to true for all the nodes. This shoves off about 0.5s in both browsers, nothing major.

  7. #7
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    261

    Default

    I played a bit more with the tree, and there is a fundamental performance problem with it in Ext Js 4.1 and, by what I've seen so far, in 4.2 as well.

    Collapsing and expanding nodes that have a lot of descendant nodes and a bigger depth takes a long time even in Chrome. 'Long time' is a subjective concept but I find that having to wait for 4-5 seconds to expand a node after the tree has been loaded is unacceptable.

    I really hope that this issue is going be fixed in 4.2.

  8. #8
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    261

    Default

    This seems to help with the node expanding speed:

    Code:
    listeners: {
                
                beforeitemexpand: function( node, eOpts )
                {
                  node.startTimeMs = new Date().getTime();
                  Ext.suspendLayouts();
                },
    
                afteritemexpand: function ( node, index, item, eOpts )
                {
                  Ext.resumeLayouts(true);
                  Ext.log({level: 'info'}, 'Expanded ' + node.data.text + ' in ' + (new Date().getTime() - node.startTimeMs) / 1000 + 'seconds')
                },
              },
    and:

    Code:
    onLoadTreeButtonClick: function (button, e, options) {
        //debugger;
        var treePanel = Ext.getCmp('treePanel');
        treePanel.el.mask('Loading...', 'x-mask-loading');
        Ext.Ajax.request(
        {
          url: 'data.json',
          method: 'GET',
          params: {},
    
          success: function onSuccess(result, request) {
            var nodes = Ext.JSON.decode(result.responseText).result;
            startTimeMs = new Date().getTime();
    
            treePanel.suspendEvents(false);
            //Ext.suspendLayouts();
            // batch of updates
            treePanel.setRootNode(nodes[0]);
            //treePanel.getRootNode().expand(true);
            treePanel.el.unmask();
            //Ext.resumeLayouts(true);
            //treePanel.getStore().resumeEvents();
            treePanel.resumeEvents();
            Ext.log({level: 'info'}, (new Date().getTime() - startTimeMs) / 1000 + 'seconds');
          },
          failure: function (result, request) {
            treePanel.el.unmask();
            Ext.net.DirectEvent.showFailure(result);
          }
        });
    
      }

  9. #9
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    261

  10. #10
    Sencha User
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default

    It is very-very sadly that it is worse with 4.2.

    Quote Originally Posted by bogc View Post
    One note here, I could remove the treePanel.getRootNode().expand(true); statement since the expanded attribute is set to true for all the nodes. This shoves off about 0.5s in both browsers, nothing major.
    There is a very strange point. I don't understand why it doesn't help.

    Generally, I would also consider such the performance regression since ExtJS 3 as a bug. Voted up your bug report. I will monitor and support your opinion in that thread if needed .

    Ok, lets wait what ExtJS team will answer.

Page 1 of 2 12 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
  •