Question

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.

Answer 1

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.