9

I am using a jsTree with around 1500 nodes, nested to a max of 4 levels (most are only 1 level deep), and I'm getting Internet Explorer's "this script is running slowly" error. I began with just a straight html_data <li> structure, generated by ASP.NET. The tree wouldn't finish loading at all. Then I tried xml_data and json_data, which was a little better but eventually errored out. My last-stitch effort was async loading. This fixed the initial load problem, but now I get IE's error when I expand one of the larger branches.

More details: I'm using the checkbox plugin, and I will also need the ability to search. Unfortunately, when searching, the user could potentially enter as little as one character so I'm looking at some large set of search results.

Has anybody done something similar with such a large data set? Any suggestions on speeding up the jsTree? Or, am I better off exploring other options for my GUI?

I realize I haven't posted any code, but any general techniques/gotcha's are welcome.

Chait
  • 1,052
  • 2
  • 18
  • 30
mike
  • 536
  • 1
  • 6
  • 16
  • For large data sets, you're better off using a component that does lazy rendering of only parts that are visible in the viewport. SlickGrid does a damn good job at this. You can easily introduce a tree-like look by using icons + indentation (via padding) using a custom cell renderer. Or just grab a tree rendering plugin for SlickGrid. – Ates Goral Oct 02 '12 at 14:58

4 Answers4

4

I haven't completely solved my problem, but I made some improvements so that I think it might be usable (I am still testing). I thought it could be useful for other people:

  • First, I was using jsTree in a jQuery dialog, but that seems to hurt performance. If possible, don't mix large jsTrees and Dialogs.
  • Lazy loading is definitely the way to go with large trees. I tried json_data and xml_data, and they were both easy to implement. They seem to perform about the the same, but that's just based on basic observation.
  • Last, I implemented a poor man's paging. In my server-side JSON request handler, if a node has more than X children, I simply split into many nodes each having a portion of those children. For instance, if node X has say 1000 children, I gave X child nodes X1, X2, X3,..., X10 where X1 has children first 100 children, X2 has next 100 children and so on. This may not make sense for some people since you're modifying the tree structure, but I think it will work for me.
Chait
  • 1,052
  • 2
  • 18
  • 30
mike
  • 536
  • 1
  • 6
  • 16
3

jsTree supports all your needs

Radek
  • 13,813
  • 52
  • 161
  • 255
  • "where the branch would be too big"...do you mean you can load part of a branch? i'm already doing lazy loading, but some nodes have a few hundred children which i think is causing the problem. – mike Oct 03 '12 at 19:38
  • Ajax call is made when `"state": "closed",` for the node. So if don't want to load any children for any particular node just use `"state": "closed",` for this node. – Radek Oct 03 '12 at 23:10
  • yes, that is what i'm doing. the issue is when the user expands node X and X has 300 children, jstree croaks. – mike Oct 04 '12 at 18:08
  • 300 isn't too many. This is strange. It must be about something else. How many node in total? What OS? What browser? How much memory? – Radek Oct 04 '12 at 22:54
  • 300 approximately - ~1500 total, maybe 1000 on a single branch. What's the max you've seen without slowdown? windows 7, IE 8, 4GB RAM, Intel i5 proc. – mike Oct 08 '12 at 22:06
  • I do not have much experience with that. I can (probably) try something the weekend. If this is a really problem for you you can try other tree plugins and compare. You can try to contact Ivan directly. – Radek Oct 08 '12 at 22:28
3

I'm a bit disappointed in it's performance myself.

Sounds like you need to try lazy loading: instead of loading the whole tree all at once, only load as needed.

That is, initially load only the trunk of the tree (so all nodes are "closed"), then only load a node's children when user clicks to open it.

JsTree can do this, see the documentation.

(Is that you mean by "async loading"?)

MGOwen
  • 6,562
  • 13
  • 58
  • 67
1

jstree sucks - it is the "refresh" which is slow 10 seconds for a 1000 child nodes being added, or to load a tree with 10000 items among 40 nodes it takes over a minute. after days of development I have told my colleague to look at slickgrid instead, as everyone will refuse to use a page which takes so long to do anything. it is quicker if you do not structure it correctly eg 3 seconds for 1000 nodes but then the arrow will not have any effect to close it down.

This is to replace a combination of ms treeview and ms imagelist which loads the same 10000 items across forty parent nodes in 3 seconds.

stuart
  • 21
  • 1