Issue 116: Expand/Collapse performance is bad when using fx and large number of child nodes
Status:  Verified
Owner:
Closed:  Nov 2010
Reported by rake36, Sep 2, 2009
What steps will reproduce the problem?
1. Set fx option using fx: { height: "toggle", duration: 200 }
2. Have a large number of nodes - although problem seems to be directly 
proportional to number of nodes. 
3. Expand and Collapse the folder.

(If possible, please attach an example HTML file, that works when copied
into the dynatree/doc/ folder.)

What is the expected output? What do you see instead?
200ms Expand/Collapse of all the children.  Seems like it was adding 200ms 
per child node (not sure, just subjective).

What version of the product are you using?  0.5.1 Rev 279
On what operating system and browser?  Vista x64, Firefox 3.5.2


Please provide any additional information below.

I rem'd out the fx: option and the problem went away.

$(function() {
    $("#tree").dynatree({
        debugLevel: 2,
        minExpandLevel: 1,
        title: "Select All",
        rootVisible: true,
        persist: false,  //do not persist between page reloads
        checkbox: true,  //show checkboxes for all nodes
        selectMode: 3,   //perform hierarchical selection
        //fx: { height: "toggle", duration: 200 },
        onSelect: function(flag, dtnode) { saveTreeValues(flag, dtnode); },
        initAjax: { url: $("#SiteNamePath").val() + $("#AppId").val() },
        onPostInit: function(isReloading, isError) { saveTreeValues(); }
    });
});    
Sep 2, 2009
#1 rake36
Here's the data brought into the tree via the initAjax.
Sites.json
84.3 KB   View   Download
Sep 2, 2009
Project Member #2 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Accepted
Cc: moo...@wwWendt.de
Sep 2, 2009
Project Member #3 moo...@wwwendt.de
(No comment was entered for this change.)
Owner: moo...@wwWendt.de
Cc: -moo...@wwWendt.de
Sep 2, 2009
Project Member #4 moo...@wwwendt.de
(No comment was entered for this change.)
Labels: Milestone-Release0.5.2
Sep 20, 2009
Project Member #5 moo...@wwwendt.de
I tried to expand a root node 130 children on FF 3.5 on Vista 32.
There was no noticable delay.

Can you post a link to your example?

(n.b. FireBug benchmark shows that 99% of the time is spent inside jquery.)
Sep 20, 2009
#6 rake36
Currently, it's an internal only dev site, so it's hard for me to make public for you.  
I'll try to mock something up.  What "fx" settings did you try?
Sep 20, 2009
Project Member #7 moo...@wwwendt.de
I tried a 3-level tree, that has ~150 1st level nodes.
Than expanded/collapsed the root (minExpandLevel: 0, to make the root collapsible)

$("#tree").dynatree({
  title: "Lazy loading sample",
  rootVisible: true,
  minExpandLevel: 0, // 1: root node is not collapsible
  persist: true,
  checkbox: true,
  selectMode: 3,
  fx: { height: "toggle", duration: 200 },
  [...]


Sep 20, 2009
#8 rake36
Mine was with 4-5 root level nodes, with a hundred or so per root level.
Sep 20, 2009
#9 rake36
Here's a failing test case with actual JSON from my application.  See schools.json
for the data and testpage.html to load the example.  If you turn on FX, reload the
page, then start expanding and collapsing the 4 top level nodes, you'll see how the
performance takes a big hit.
dynatree node testing.zip
79.7 KB   Download
Sep 21, 2009
Project Member #10 moo...@wwwendt.de
Cool, I didn't know that "url:" works with local files :-)
Thanks for building this sample!

Some q'n'd timings on my Athlon 5000 box:

Expanding                simple    animated
Yadkin (23 nodes)         0.05      0.12     sec
Guilford (335 nodes)      0.34      3.18     sec

I tracked it down to the $.animate() call, so it's inside jQuery.

But the root cause is propably, that all child nodes are rendered as separate <div>
tags, so we need 335 animate calls.
I don't see a quick fix here, but I am planning to wrap all children into one <div>
tag, when implementing drag'n'drop in the next major release, so I postpone it until
then.

Labels: -Milestone-Release0.5.2 Milestone-Release1.0
Nov 14, 2010
Project Member #11 moo...@wwwendt.de
v1.0 should be way faster now; can you confirm?
Status: Waiting
Nov 20, 2010
Project Member #12 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Done
Labels: -Milestone-Release1.0
Jul 17, 2012
Project Member #13 moo...@wwwendt.de
considered verified
Jul 17, 2012
Project Member #14 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Verified
Jan 26, 2013
Project Member #15 moo...@wwwendt.de
(No comment was entered for this change.)
Labels: Milestone-Release0.0