| Issue 109: | Speed improvements (regression due to issue 98?) | |
| 2 people starred this issue and may be notified of changes. | Back to list |
I have a tree with 170 nodes and initialization of dynatree takes about
2-2,5 sec. For 10 nodes it takes about 160ms.
Problem is when I have 2 such "big" trees on a page the rendering is pretty
annoying. For 4 seconds user sees normal HTML lists and browser is not
responding during rendering. After 4 seconds lists becomes a dynatree.
(this is in FF 3.0) IE doesn't render list just shows blank space and
display rendered dynatree after that time
Is there a way to speed things up?
My code looks more or less like this. I'm using version 0.5.0_rc-1
$(function(){
$(<tal:js content="string:'#${fieldId}'"/>).dynatree({
//Tree parameters
checkbox: true,
selectMode: <tal:js content="selectMode"/>,
activeVisible: true,
//Un/check real checkboxes/radios recursively after selection
onSelect: function(select, dtnode) {
dtnode.visit(function(dtnode){
$("#chb-"+dtnode.data.key).attr("checked",select);
},null,true);
},
onDblClick: function(dtnode, event) {
dtnode.toggleSelect();
},
onKeydown: function(dtnode, event) {
// toggle on space
if( event.which == 32 ) {
dtnode.toggleSelect();
return false;
}
// expand on enter
if( event.which == 13 ) {
dtnode.toggleExpand();
return false;
}
},
onExpand: function(select, dtnode) {
$("#chb-"+dtnode.data.key).attr("checked",dtnode.isSelected());
}
});
});
Jul 9, 2009
Thanks for all suggestions! For now, checkboxes must remain, so: - I can't initialize from JS objects because I can't insert checkboxes into tree using this method - I can't use lazy loading because of the restriction above. Is it possible just to return an HTML structure? Then I could just display root and then lazy load the whole tree as <ul> list with my custom markup. - Checkboxes have to be there and they don't impact performance - I've hidden tree while is rendering and displaying a <div> with message "Tree loading". But "loading" icon doesn't spin and browser is locked for few seconds as before. But at least user knows that something is happening ...
Jul 9, 2009
I fear, my fix for issue 98 introduced the poor performance. I will look at it.
Summary:
Speed improvements (regression due to issue 98?)
Status: Accepted Labels: Priority-High Milestone-Release0.5
Jul 9, 2009
Could you verify, if rc4 performs better?
Jul 10, 2009
No noticable difference, maybe few miliseconds.
Jul 10, 2009
Then my fix (which greatly improved expanding/collapsing speed) is unrelated to your problem. I need some help to reproduce it: e.g. can you attach the html file that loads slow (i.e. the file with the 170 LI elements)?
Jul 10, 2009
I've change debugMode to 2 and added some my own debug messages. Reading ul list takes less than 40ms. But adding each node takes about 5ms and there is 10-15ms gap between each call of _addChildNode(). See attached log fragment below. Any ideas, clues? --- 11:3:28.60 - Dynatree._init(): version='$Version: 0.5.0_rc4$', debugLevel=2. 11:3:28.70 - DynaTree.persistence: Object 11:3:28.75 - Dynatree._init(): read tree structure... 11:3:28.111 - Begin _addChildNode() [line 1002] 11:3:28.114 - Force expand for dtnode<ab9c38e3389f92f19b750c8e2bc94c8d>: '<input id="chb-ab9c38e3389f92f19b750c8e2bc94c8d" value="ab9c38e3389f92f19b750c8e2bc94c8d" name="field.target_business:list" type="checkbox"> <div style="cursor: pointer; display: inline;">Group</div>' parent=dtnode<root>: 'Dynatree root' 11:3:28.119 - Before dtnode.bSelected [line 1059] 11:3:28.121 - Before tree.bEnableUpdate [line 1074] 11:3:28.124 - End _addChildNode() [line 1079] 11:3:28.139 - Begin _addChildNode() [line 1002] 11:3:28.141 - Before dtnode.bSelected [line 1059] 11:3:28.144 - Before tree.bEnableUpdate [line 1074] 11:3:28.146 - End _addChildNode() [line 1079] ... ----
Jul 10, 2009
I need the requested file to help you
Jul 17, 2012
considered verified
Status:
Verified
|
The doc folder contains a file called test-bench.html, where you can see performance when adding 100 - 10.000 nodes (using the API). I havent benchmarked big <ul> trees yet. These optimizations come to my mind: - initialize the tree from JS objects instead of passing UL tags That must be faster, since parsing the UL tags is a preprocessing step to this. - use the built-in lazy loading mechanism; this should be more user friendly, since it displays a spinnig wheel, instead of a list Also the first page display fast, since it's small (doesn't contain much tree data. - try to remove the custom checkboxes, or at least have them outside the tree structure (you could try thzis andsee if it affects the timings) - you could set display:none for your UL list, so at least it's not visible while loading