Issue 182: Load time issue
Status:  Done
Owner: ----
Closed:  Oct 2013
Reported by bjohnson...@gmail.com, Feb 23, 2011
What steps will reproduce the problem?
1. Implement your AJAX loading example
2. Load the page using attached data

See attached image which shows the times of each debug line.  It also includes loading of initial data.

We would expect this to load faster, is it configured wrong or anything?

Version: 1.1.0

Windows Vista + Firefox 3



time.jpg
95.2 KB   View   Download
test.json.txt
10.5 KB   View   Download
Feb 23, 2011
#2 bjohnson...@gmail.com
Well I tried your benchmarks again and they seem fairly slow as well.

On first load, opening the 100 node examples seems fairly slow in firefox 3.  Something like 5-6 seconds or so shown by firebug.
Feb 23, 2011
#3 bjohnson...@gmail.com
Seems to work much better in IE and Chrome.  Isolated to firefox 3 perpages? 

Using:
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2.2) Gecko/20100316 Firefox/3.6.2 ( .NET CLR 3.5.30729; .NET4.0C)

On Vista 64bit.
Feb 23, 2011
Project Member #4 moo...@wwwendt.de
I tried your sample with FF 3.6.13 / Vista on an Athlon 5000 (see attached timings).
Took < 0.85 seconds here. (Loading the json file locally).

Typically most of the time (and memory usage) is taken by the DOM rendering.
Dynatree defers this step until the nodes become visble for the first time, so it is more efficient to use a hierarchical structure.
This sample contains one branch with 10k loaded nodes:
http://wwwendt.de/tech/dynatree/doc/test-bench.html

2011-02-24 08h07_39.png
48.4 KB   View   Download
2011-02-24 08h12_04.png
23.0 KB   View   Download
Status: Waiting
Feb 24, 2011
#5 bjohnson...@gmail.com
Hi,

Your http://wwwendt.de/tech/dynatree/doc/test-bench.html

Loads slow for us on Firefox as well so I think we can just use it for the example instead of our own code.

What can I send you to help debug this issue?  I understand you can't reproduce it but it is a problem for us.  It works fine in IE/Chrome but FF is the issue.  Any FF plugins or anything to check?
Feb 24, 2011
Project Member #6 moo...@wwwendt.de
You Could send the results of Firebugs console-profiling and Network Tabs
Thx

Feb 24, 2011
#7 bjohnson...@gmail.com
I hope these help.  Let me know if there is anything I can do or anything else you need.
time.jpg
60.1 KB   View   Download
time2.jpg
141 KB   View   Download
Feb 24, 2011
Project Member #8 moo...@wwwendt.de
6 seconds for 100 nodes is way too slow, of course :-(
Firebug has a [Profile]-Button in the Console tab (see the my second screenshot).
That could help to identify the cause.

You could also try to run this sample locally from the distribution, to see if it makes a difference.
2011-02-25 07h49_23.png
13.6 KB   View   Download
2011-02-25 07h50_37.png
34.8 KB   View   Download
Feb 24, 2011
Project Member #9 moo...@wwwendt.de
I pressed [Profile], then expanded 'Add 100 nodes(flat)', then [Profile] again...
Feb 25, 2011
#10 bjohnson...@gmail.com
Please try the Add 100 nodes (flat, force update).

Here is updated profile screen.
time1.jpg
66.1 KB   View   Download
time2.jpg
233 KB   View   Download
Feb 25, 2011
Project Member #11 moo...@wwwendt.de
I would expect 'Add 100 nodes (flat, force update)' to be slow, since it forces a redraw after every single node. I get similar numbers here.
Maybe that could be improved, but normally loading is wrapped inside `enableUpdate(false/true)` calls. For example, when loading JSON.

Are the other modes reasonably fast on your box? I got 0.167s for '100 Nodes flat'.

I would guess, that for some reason your code runs in 'update mode'. Can you send a working sample - all files - so that I cun run it and have a look...
Feb 25, 2011
#12 bjohnson...@gmail.com
Here is the script I am using.  The url parameter simply points to a URL which returns the JSON code I posted in my first post.

<script type="text/javascript">
$(function(){
    $("#location_tree_container").dynatree({
        checkbox: true,
        selectMode: 1,
        classNames: {checkbox: "dynatree-radio"},
        initAjax: {
            type: "GET",
            url: "",
            data: { type: "location_tree" }
        },

        debugLevel: 2,
        onActivate: function(node) {
            $("#echoActive").text(node.data.title);
        },
        onDeactivate: function(node) {
            $("#echoActive").text("-");
        }
    });
});
</script>
Feb 25, 2011
#13 bjohnson...@gmail.com
The other ones are slow on your example as well.  Here is the 1000 flat update.
time1.jpg
68.1 KB   View   Download
time2.jpg
99 KB   View   Download
Feb 26, 2011
Project Member #14 moo...@wwwendt.de
My benchmarks for '1000 flat':

2011-02-26 09h06_45.png
14.9 KB   View   Download
2011-02-26 09h05_47.png
30.0 KB   View   Download
Feb 26, 2011
#15 bjohnson...@gmail.com
Hm, I guess I am not sure what to say.  Unfortunately it doesn't work that fast for us as you can see from the screenshots.  I checked with 3 of my peers and 2 said it is slow and they get the same speeds as me, the other one gets the speed you do.  You have a great plugin here but unfortunately if it is slow for 50% of the people viewing the tree I don't think it will work.
Feb 26, 2011
Project Member #16 moo...@wwwendt.de
I would really like to understand what is going on there, but I understand your point of course.
(Are RAM, Firefox Version and installed Plugins similar with your peers?)
Feb 26, 2011
#17 bjohnson...@gmail.com
I disabled all plugins and extensions in firefox except firebug to test if this was the issue and this did not help.

I have 6GB ram and i7 2.67 processor so this shouldn't be an issue.

Is there any other tool I can use to give you further information?  The other user that had the issue was using windows XP (I am using vista) and it was same version of firefox (latest).

Feb 27, 2011
Project Member #18 moo...@wwwendt.de
Thanks for your support!
Tried on a Windows 7 laptop, FF 3.6.13, 3GB, 2.56 dual core and it's fast.

I guess I have to check some more systems here until I find one that shows the slow performance, so I can debug it.
Feb 27, 2011
Project Member #19 moo...@wwwendt.de
Ubuntu 10 laptop, FF3.6.13, 1.8GHz dual core, 1GB RAM
takes 1.5 sec (i.e. fast)
Feb 27, 2011
Project Member #20 moo...@wwwendt.de
Win XP SP 3, 1 GB RAM, Athlon 3600, FF3.6.13
1.1 sec (fast)
Feb 27, 2011
Project Member #21 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Accepted
Owner: moo...@wwwendt.de
Feb 27, 2011
#22 bjohnson...@gmail.com
Hmm.  Wish there was a way to reproduce this for you.  Are there any other tools we can use to help?
Feb 27, 2011
Project Member #23 moo...@wwwendt.de
I am not aware of other tools we could use.
I can try some other boxes in the next few days.

Looking at your results, I see that the min., max., and average timings of render() have a huge variant!
Render is called 2008 times, taking 8034 ms. altogether. But the max. exec time of a single call is 7841. 
My guess is, that there is one single command that introduces the delay (or is slow when called for the first time)

If I could get my hands on a slow system, I would add some debug-logging to the render() code, to see some more time stamps and step through it with firebug.
A 7-second delay should be noticable...
Feb 27, 2011
#24 bjohnson...@gmail.com
If you want to add more debug code I can do more testing in firebug and send any results if needed.
Feb 27, 2011
Project Member #25 moo...@wwwendt.de
The first thing would be to uncomment this
//		this.tree.logDebug("%s.render(%s)", this, useEffects);
in render() around line 265.

If it turns out, that the first call to render is the slow one, then you can set a breakpoint there and [F10] away.
Feb 27, 2011
#26 bjohnson...@gmail.com
Can you do that on your example or do you mean in our code?
Feb 27, 2011
Project Member #27 moo...@wwwendt.de
sorry, I meant 
- extract dynatree-1.1.0.zip from the download page
- patch src/jquery.dynatree.js
- open and debug doc/test-bench.html
(assuming the problem occurs, when running locally)
Feb 28, 2011
Project Member #28 moo...@wwwendt.de
I found one unnessecary call to render(), that I removed. So test-bench.html should run faster in v1.1.1.
Still doesn't explain the differnece though.
Mar 1, 2011
#29 bjohnson...@gmail.com
Still seems to be slow.  Have not had a chance to add your debugging code.  Will try to do it this week.
Mar 1, 2011
Project Member #30 moo...@wwwendt.de
Just released 1.1.1 one minute ago. 
render() is now only called 1007 times in the 'Add 1000 nodes (flat)' sample. here, (was >2000 times).
But this might only apply to the special benchmark sample, not your real-world scenario.
My guess from comment 23 may also point in the wrong direction, because the first call to render contains all other recursive calls to render, ehich explains that it takes the longest time.
Mar 10, 2011
#31 prana001
Martin,

Don't know if you know this site, but maybe it can help in some way:

http://jsperf.com/

Yomodo
Mar 28, 2011
#32 bjohn...@accomplishhosting.com
I think we are getting a little better performance with firefox 4 but I wanted to check, has anything been updated since I last posted?
Mar 28, 2011
Project Member #33 moo...@wwwendt.de
Only the changes mentioned in comment 30... I guess you have tried with 1.1.1?
I wasn't able to reproduce the slow behavior so far, may be I should add a feedback link to the benchmark page...
Mar 28, 2011
Project Member #34 moo...@wwwendt.de
Just tried with FF 3.6.16 on Ubuntu inside a VirtualBox(!): 'Add 1000 nodes (flat)' took around 1 sec.
Oct 6, 2013
Project Member #35 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Done
Owner: ---
May 2, 2014
Project Member #36 moo...@wwwendt.de
Cleanup Scrumboard
Labels: Milestone-Release2.0