Threaded View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    133
    Vote Rating
    10
    bogc will become famous soon enough

      1  

    Default TreePanel is too slow

    TreePanel is too slow


    Ext version tested:
    • Ext 3.4.0 (I used this as reference - in this version the TreePanel is very good)
    • Ext 4.1.1
    • Ext 4.2 beta

    Browser versions tested against:
    • Chrome 23.0.1271.97 m
    • IE9

    Description:
    • The TreePanel component is too slow for trees with with around 400 nodes and a depth level of 6-7. This manifests in two ways:
      • the tree rendering process is slow. This can be somehow alleviated using Ext.suspendLayouts()/Ext.resumeLayouts().
      • expanding collapsed nodes with lots of descendants and a high depth takes an unacceptable long time.
    I used as reference the ExtJs 3.4 implementation of the TreeGrid component (which is based on the TreePanel). Compared to 3.4 the TreePanel in version 4.x is much slower.

    Steps to reproduce the problem:
    • Unzip the TestExtJs4.zip file in a folder of your choice. The zip file contains a small app wired to work with 4.1.1. The app can be launched through the app.html file. The zip file also contains a data.json file with data. It is very important to use this data for testing. You might have to change the paths inside app.html file to point it to different versions of ExtJs 4.
    • Assuming that you made the app available under web server etc. etc, run app.html inside IE or Chrome or FireFox. Open the development tools specific to the browser in order to be able to see the console messages produced with Ext.log.
    • Click on the Load Tree button. The application will display how long it took to load the nodes. Make a note of that. On my computer and using IE9 it took ~ 14s to render the tree.
    • Now, collapse the first folder node (llprqpgrhgzqyzvi) and after that collapse the second folder node (yvcrjbllfshgtv)
    • Expand the second folder node (yvcrjbllfshgtv)
    • Check the time it took to expand the node. On my computer and using IE9, it took 8.405 seconds to expand the node!
    • Try the previous steps with ExtJs 4.2 and different browsers.
    • Now, unzip the TreeGridExtJs34.zip in the folder of your choice etc.
    • Open treegrid.html in the browser of your choice (the same one you used to test ExtJs 4) and open the development tools specific to the browser
    • Click the Load Tree node button and check the console that shows you how long it took to load the nodes. On my computer and using IE9 it took 1.1s to render the tree.
    • Now, collapse the first folder node (llprqpgrhgzqyzvi) and after that collapse the second folder node (yvcrjbllfshgtv)
    • Expand the second folder node (yvcrjbllfshgtv)
    • Check the time it took to expand the node. On my computer and using IE9 it took 0.038 seconds to expand the nodes.

    The result that was expected:
    • See the same performance level in Ext Js 4.x as is in Ext Js 3.4
    • Performance in Ext Js 4.2 to be better than ExtJs 4.1
    • In Ext Js 4.x expanding any node in the tree to be instantaneous for a reasonable amount of nodes (it's subjective but I think 500 nodes should be fine in my mind) that are underneath that node and no matter the depth level.

    The result that occurs instead:
    • Overall poor performance of the tree in ExtJs 4.x. Even when using Ext.suspendLayouts()/Ext.resumeLayouts() the performance is worse than it is in ExtJs 3.4 (by more than 100% worse).
    • The performance in Ext Js 4.2 is worse than it is in ExtJs 4.1!
    • Expanding the second node took an unacceptable amount of time (8s under IE). Business users won't be happy at all if they have to wait such a long time to expand nodes of trees already loaded in the memory.

    Test Case:

    I don't have a test case, but you could transform the sample I have provided in a test case by comparing the amount of time to load the tree against a hard value such as 1s or 2s.


    Operating System:
    • Windows 7 64 bit
    Attached Files

Thread Participants: 1