Hi,
I'm having performance trouble with big tree objects. I traced the problem to JS generating the DOM and the event handlers.
¿Do you think the JS code could be modified to make the Item adding faster? For example, for non visible objects maybe some processing could be done on parent expansion instead of on loading.
Tree.js code is tidy, but a little complicated, so I'm asking for your opinion before trying myself.
Thanks
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Me again,
I did some testing commenting parts that could be done on expansion (like adding images, styles and events). I got an important improvement on performance but got some problems:
On a couple of lines of Tree.js logic is hooked to the imageNode.src (lines 242 & 384). If theese lines used .tw_isLeaf and .tw_expanded it would be easier. ¿Are theese lines old code or there is no work arround to using the image path for the program logic?
Thanks!
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Let me save you a little effort here. First, tree is quite possible the worst performing of the components for historical reasons I'm not going to bore everyone with, but the bottom line is it needs a rewrite in order to achieve GridBox like performance levels. Now, with that said, you are correct, waiting until expansion is the right thing to do. However, you don't have to do it in the browser code. Just add a listener like so on the server side:
tree.addPropertyChangeListener(Tree.Item.PROPERTY_ITEM_EXPANDED, new PropertyChangeListener() {
public void propertyChanged(PropertyChangeEvent ev) {
if (ev.getNewValue() != Boolean.TRUE) return;
Tree.Item item = (Tree.Item)ev.getSource();
item.getChildren().clear(); // remove the "Loading..." Tree.Item place-holder
//... add children to the Tree.Item...
}
});
Then all you have to do is populate your top-level items, each with a single child Tree.Item that has text saying "Loading...". I've used this approach many times with great success.
-Josh <G>
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Hi,
I'm having performance trouble with big tree objects. I traced the problem to JS generating the DOM and the event handlers.
¿Do you think the JS code could be modified to make the Item adding faster? For example, for non visible objects maybe some processing could be done on parent expansion instead of on loading.
Tree.js code is tidy, but a little complicated, so I'm asking for your opinion before trying myself.
Thanks
Hello,
what is "big"? which environment (OS, browser, version)?
Regards,
Oleksandr
Over 1k nodes. It takes over 10s to load.
Im testing with Firefox 2.0.0.8 on Win2k
Regards
Me again,
I did some testing commenting parts that could be done on expansion (like adding images, styles and events). I got an important improvement on performance but got some problems:
On a couple of lines of Tree.js logic is hooked to the imageNode.src (lines 242 & 384). If theese lines used .tw_isLeaf and .tw_expanded it would be easier. ¿Are theese lines old code or there is no work arround to using the image path for the program logic?
Thanks!
Let me save you a little effort here. First, tree is quite possible the worst performing of the components for historical reasons I'm not going to bore everyone with, but the bottom line is it needs a rewrite in order to achieve GridBox like performance levels. Now, with that said, you are correct, waiting until expansion is the right thing to do. However, you don't have to do it in the browser code. Just add a listener like so on the server side:
tree.addPropertyChangeListener(Tree.Item.PROPERTY_ITEM_EXPANDED, new PropertyChangeListener() {
public void propertyChanged(PropertyChangeEvent ev) {
if (ev.getNewValue() != Boolean.TRUE) return;
Tree.Item item = (Tree.Item)ev.getSource();
item.getChildren().clear(); // remove the "Loading..." Tree.Item place-holder
//... add children to the Tree.Item...
}
});
Then all you have to do is populate your top-level items, each with a single child Tree.Item that has text saying "Loading...". I've used this approach many times with great success.
-Josh <G>