PDA

View Full Version : How to improve performance of TreeNode.appendChild



just_a_kid
11 Nov 2010, 7:09 AM
Hi,

I have a TreeNode which could have more than 1000 child nodes

If i expand those treenode which have a lot of child nodes it becomes very slow

I notice that this method is very slow
TreeNode.appendChild

I am thinking to rewrite this method to remove some unnecessary event or processing.

Can anybody help me with that ?

Thanks

just_a_kid
11 Nov 2010, 8:47 AM
I found this tips somewhere in internet
http://dev.opera.com/articles/view/efficient-javascript/?page=3

that we should not modify the live dom tree

So i created a dummy tree node to contain all my child

var rootNode; //parent of the child nodes
var dummyNode = new TreeNode({id:"dummy});

for(var r=0;r<response.length;r++){
var node = response[r];
node.parentNode = dummyNode;
dummyNode.childNodes.push(node);
}
rootNode.appendChild(dummyNode);


Above way works quite good in term of performance

But there is one problem. i want to remove the dummyNode from tree and move all the childs nodes of this dummy nodes to one level up.

What is the way to do it without performance hogging ?

If i loop trhought the child nodes of the dummyNode and start adding it to the rootNode then it will be performance intensive.

Thanks

just_a_kid
17 Nov 2010, 6:31 PM
I have found the problem by using profiler in IE

Inside TreeGridNodeUI.js renderElements



buf.push(
'</tr><tr class="x-tree-node-ct"><td colspan="', cols.length, '">',
'<table class="x-treegrid-node-ct-table" cellpadding="0" cellspacing="0" style="table-layout: fixed; display: none; width: ', t.innerCt.getWidth() ,'px;"><colgroup>');



the t.innerCt.getWidth() is taking a lof time . i am not so sure what it does.


The other issue is everytime after i expand the TreeNode , collapse it and expand again . the extjs does not go to the remote to pull data instead it pulls from the cache which is fine


The only thing is a bit slow for those large tree node and i found this fxWrap ( took 953ms based on profiler ) is contributing to some of the slowness



fxWrap : function(pos, o, vis){
var dom = this.dom,
wrap,
wrapXY;
if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){
if(o.fixPosition){
wrapXY = fly(dom).getXY();
}
var div = document.createElement("div");
div.style.visibility = vis;
wrap = dom.parentNode.insertBefore(div, dom);
fly(wrap).setPositioning(pos);
if(fly(wrap).isStyle(POSITION, "static")){
fly(wrap).position("relative");
}
fly(dom).clearPositioning('auto');
fly(wrap).clip();
wrap.appendChild(dom);
if(wrapXY){
fly(wrap).setXY(wrapXY);
}
}
return wrap;
},



The question how do i override/extends it to make it faster , what it does and so on

hemanthrpr
13 Jun 2013, 12:20 PM
@Just_a_kid
Thanks for the idea and one thing I did was to hide the dummyNode by adding a class name to it instead of removing it.


yourTreepanel.getView().addRowCls(dummyNode,'dummyRow');
And then in css you can add this.

.dummyRow {
display : none;
}



P.S : I'm new to extJS world, so excuse me if it didn't make any sense.

hemanthrpr
20 Jun 2013, 10:53 AM
You might see the dummy rows again after sorting. In order to hide again, you can add sortChange listener like below :




sortChange : function(){
treePanel.getRootNode().cascadeBy(function(node) {
if(node.data.dummy){
treePanel.getView().addRowCls(node,'dummyRow');
}
});
}



Note : I created the dummyNode like below :




var dummyNode = Ext.ModelManager.create({"leaf" : false,"expanded" : true,"dummy" : true}, 'modelName');




where modelName is the model in the store.