Best approach for extremely large nodes?

[Michael Davis]

Hi guys,

I'm currently building an app which is using 15,000 nodes, and potentially a much, much larger node structure (in the hundreds of thousands).

Currently with 15,000 nodes it takes around 5-10 seconds to load the page. These are all loaded using the HTML data.

I was just wondering how I would go about improving the performance? Would loading it through AJAX or JSON be a better approach? Or is there a different approach I should use? I haven't tested it yet with 100,000+ nodes, but I'd imagine the browser would stall being that large.

Thanks

[Ivan Bozhanov]

100,000 DOM nodes in the browser is slow enough already, without jstree. Anyway - jstree will only keep visible nodes in the DOM, so if your tree is not a flat list you will probably be fine.
Switch to JSON - whether you use AJAX and lazy loading or not is up to you, but simply make sure you swith to JSON. HTML is very slow for large trees, as jstree needs to traverse the DOM to gather data. Simply use JSON and it will be a few times faster. (I have 30.000 nodes loading in firefox in less than a second). Keep in mind JSON does not mean you need to use AJAX, you can simply add:

"core" : "data" : [/*your JSON here*/]

However if you reach hundreds of thousands you will probably need to start using lazy loading, otherwise the initial JSON would be too large.

Best regards,
Ivan

[Michael Davis]

Thanks Ivan, it looks like I'll switch to JSON to make it faster. I'll combine JSON with a Lazy Loading approach and see how it goes. Would AJAX speed this up at all? Or is it simply a method for fetching from a remote server?

Thanks

[Ivan Bozhanov]

AJAX will not give you speed per say. Switching to JSON should be enough. However if you have an extremely large tree AJAX will have the benefit of fetching the tree in parts so you gain speed because:
1) you do not load all the JSON at once - for example instead of 3MB JSON, you only return a few root nodes (a few KB)
2) jstree does not have to process the whole tree at once - so instead of building the tree using a few hundred thousands of nodes, jstree will work with a few root nodes and then build the tree as the user opens the nodes

So there is no overall valid advice I can give you because I do not know your use case and data, it is up to you - see if what I said above applies to you and add lazy loading if you think you will gain from it. But definitely go with JSON, so jstree does not have to parse DOM nodes and build its internal tree representation by iterating through thousands of DOM nodes.

Best regards,
Ivan