javascript - JS tree Loading time issue -

i have implemented tree js tree , here i'm getting lot of time(around 1 min) when loading tree..

i wanna find way reduce time , have on 5000 nodes in implementaion.

in view

$("#tree").jstree({          checkbox: {             real_checkboxes: true,             real_checkboxes_names: function (n) { return [("check_" + (n[0].id || math.ceil(math.random() * 10000))), n[0].id] }         }, "plugins": ["themes", "html_data", "checkbox", "sort", "ui"]     }).bind('check_node.jstree', function (event, data) {         $('#searchview').show();      }).delegate("a", "click",         function (event, data) {             event.preventdefault();         }); 

html load js tree

            <tbody>                 <div id="tree">                     <ul>                        @htmlhelpers.renderjstree(model.currentnode)                     </ul>                 </div>              </tbody> 

renderjstree recursively call , load tree nodes.. way reduce time?

there couple of ways approach slow loading problem.

one way use ajax method in json_data plugin of jstree. mike tyka has given pretty neat description of doing here - http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/

another way via simple javascript method - if open using v3 of jstree still in beta version. in project had around 2200 nodes , json data came server side via single ajax call in less second. json parsing took around 8-10 seconds till page stopped responding. jstree v3 has method of getting data of node function when node opened. used method , page loads in under 2 seconds.

function initiate_jstree() { $("#tree_container").jstree({     "core": {         "data": gettree,         "themes":{             "icons":false         },     },     "plugins": [ "themes", "ui" ,"types"]  });  } function maketreedata(node){ if(node.original && node.original.actualdata){     data=node.original.actualdata; }else{     data=gdata; } treedata=[]; for(i=0;i<data.length;i++){     iter=data[i];     item={"text": iter.data};     if(iter.children){         item["children"]=true;         item["actualdata"]=iter.children;                 }     treedata.push(item); } return treedata; } var gettree = function (obj, cb) { console.log("called"); data=maketreedata(obj); cb.call(this,     data); }  initiate_jstree(); 

the gdata variable here global variable in data loaded stored in json format. here code on jsfiddle - http://jsfiddle.net/lge8c/