Serious performance issues

[Colin Childs]

I recently finished a fairly complex project using jsTree. For many use cases, it works decently well. However, I have some customers with pretty large data sets. Based on other people's use cases though, mine seems comparatively small. I would think that jsTree should be able to handle trees with 5,000 nodes, nested no more than 3 levels deep. I figured I must be doing something wrong, because the performance is abysmal. Please see the following jsFiddle for a simple example: http://jsfiddle.net/2Jg3B/82/

You can see that there is nothing super complex in that example. I'm not doing any heavy processing. I would think that performance with a mere 1,000 nodes should be unnoticeable. However, on my i7 machine with 12 GB ram, it takes almost a minute and a half in Chrome to drag and drop those 1,000 nodes somewhere else in the tree. Heaven forbid one of my customers use IE. On my new machine using IE 11, I have been waiting now for over 45 minutes to drag those nodes to another place in the tree, and it still hasn't finished. (Update: after almost 1 hour, I gave up and just closed the browser tab). After doing some simple profiling in Chrome, I noticed that the biggest issue seemed to be with redrawing and sorting. After a few tests, I found that if I removed the redraw and sort methods, did whatever operation needed to be done, then restore the methods, everything worked MUCH faster and closer to what I expected from jsTree. With almost everything I do in jsTree, I have to wrap it in the following code:

var tempRedraw = tree.redraw_node;
var tempSort = tree.sort;
tree.redraw_node = jQuery.noop;
tree.sort = jQuery.noop;
                           
//Do simple tree operation here
                           
tree.sort = tempSort;
tree.sort('#', true);
tree.redraw_node = tempRedraw;
tree.redraw_node('#', true);

You can see in the jsfiddle that selecting all 1000 child nodes and deleting them takes quite a while. For me, it was about 25 seconds. Uncommenting the lines around the delete, it is instantaneous. I saw similar results with moving nodes. Removing redraw/sort on 'dnd_start.vakata' and adding them back on 'dnd_stop.vakata', moving nodes in IE was instantaneous - a significant improvement over crashing the browser tab... You can see the improvement here: http://jsfiddle.net/2Jg3B/84/

Am I just missing some sort of setting? Am I doing something wrong, or is jsTree really that slow? If it really is just that slow, can I request that there be an option to delay all redrawing and sorting until after bulk operations have been completed?

[Ivan Bozhanov]

Thank you for this report - using a large flat list is a known problem. It all depends on loaded plugins, callbacks, etc. In my examples when I test I even work with 30.000 nodes, so it is really very different depending on the config. I will have a look at the sort plugin and possibly skip a few redraws along the way. I will keep you in the loop (inside the github issue you opened). Once again - thank you and sorry for this inconvenience - I am working on it.

Best regards,
Ivan

[Albert Assis]

I tested the jstree performance using the demo sitebrowser and found a very nice response.

(https://groups.google.com/forum/#!searchin/jstree/maximum/jstree/HqyFE5M1clg/Q6rJar3jgRkJ).

I filled  the data base with more than 1.000.000 nodes using a recursive insertion. After this i have copied, moved and duplicated, nodes without any problem.

I'm studing a little bit before start my project, because I'm a begginer. I hope the issue related in your question will not affect my results in future but I'm not expert enought to foreseen it. 

Best regards,

Albert A. Assis

[Albert Assis]

I'm sure the problem is not performance but a simpler issue.

I have tried to insert the jstree demo (browser) into a default div system, but the status was the same reported by Colin Childs.

In my case the data are taken from the data base, so I was checking for problem with sql returns. In order to test that I minimize the demo browser to the code below.

<?php

require_once(dirname(__FILE__) . '/class.db.php');

require_once(dirname(__FILE__) . '/class.tree.php');

$fs = new tree(db::get('mysqli://ro...@127.0.0.1/test'), array('structure_table' => 'tree_struct', 'data_table' => 'tree_data', 'data' => array('nm')));

$node = 1;

$temp = $fs->get_children($node);

$rslt = array();

foreach($temp as $v) {

$rslt[] = array('id' => $v['id'], 'text' => $v['nm'], 'children' => ($v['rgt'] - $v['lft'] > 1));

}

//header('Content-Type: application/json; charset=utf-8');

echo json_encode($rslt);

?>

The sql return via json echo was performed rightly.

In my case there are only 4 items to be insert into the tree, but it can't be accomplished.

If the demo browser runs alone it works well, but including it in my own div structure the tree don't render.