search

pcirella / dynatree

Automatically exported from code.google.com/p/dynatree
0 stars 0 forks source link

Expand/Collapse performance is bad when using fx and large number of child nodes #116

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
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(); }
    });
});

Original issue reported on code.google.com by rake36 on 2 Sep 2009 at 10:00

GoogleCodeExporter commented 9 years ago 
Here's the data brought into the tree via the initAjax.

Original comment by rake36 on 2 Sep 2009 at 10:10

Attachments:

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 3 Sep 2009 at 5:54

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 3 Sep 2009 at 5:56

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 3 Sep 2009 at 5:58

GoogleCodeExporter commented 9 years ago 
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.)

Original comment by moo...@wwwendt.de on 20 Sep 2009 at 10:52

GoogleCodeExporter commented 9 years ago 
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?

Original comment by rake36 on 20 Sep 2009 at 12:37

GoogleCodeExporter commented 9 years ago 
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 },
  [...]

Original comment by moo...@wwwendt.de on 20 Sep 2009 at 6:39

GoogleCodeExporter commented 9 years ago 
Mine was with 4-5 root level nodes, with a hundred or so per root level.

Original comment by rake36 on 20 Sep 2009 at 8:49

GoogleCodeExporter commented 9 years ago 
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.

Original comment by rake36 on 20 Sep 2009 at 11:42

Attachments:

GoogleCodeExporter commented 9 years ago 
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.

Original comment by moo...@wwwendt.de on 21 Sep 2009 at 12:30

GoogleCodeExporter commented 9 years ago 
v1.0 should be way faster now; can you confirm?

Original comment by moo...@wwwendt.de on 14 Nov 2010 at 2:37

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 21 Nov 2010 at 7:25

GoogleCodeExporter commented 9 years ago 
considered verified

Original comment by moo...@wwwendt.de on 17 Jul 2012 at 4:15

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 17 Jul 2012 at 4:19

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 26 Jan 2013 at 4:08