jsTree v3 open all nodes 3 times slower than jsTree 1.4

1,008 views
Skip to first unread message

zackw...@gmail.com

unread,
Mar 18, 2015, 12:28:59 PM3/18/15
to jst...@googlegroups.com
Hi,
I've tried to migrate project from jsTree 1.0-rc1 to jsTree 3 because of long time of opening all nodes by jsTree 1.0-rc1. On tree with 30K nodes and 15 max level of nesting old jsTree need 250sec to open all nodes. However using jsTree v3 it takes even more - 950sec.
For jsTree 1 i use progressive_render: true.
For jsTree3 I use basic configuration with animation turned off. JSON has structure as below:
{
        "id" : "id1",
        "text" : "text of node1",
        "state" :
         {
            "opened" : 0
         } ,
        "icon" : "icon1",
        "a_attr" :
         {
            "class" : "jstree-low"
         } ,
        "children" :
         [

             {
                "id" : "id2",
                "text" : "text of node 2",
                "state" :
                 {
                    "opened" : 0
                 } ,
                "icon" : "icon1",
                "a_attr" :
                 {
                    "class" : "jstree-low"
                 } ,
                "children" :
                 [ ...

Do you know way to speed up opening all nodes using jsTree?

Ivan Bozhanov

unread,
Mar 18, 2015, 12:34:42 PM3/18/15
to jst...@googlegroups.com
This seems very very slow. v.3 is a lot faster in almost all aspects. Maybe open_all is a separate case - I will have a look, but please tell me which plugins you use. If you use the checkbox or wholerow plugins, that would explain the slow down.
As for speed tips - I have none - it should work out of the box. So please share your config (aside from the data).

Best regards,
Ivan

zackw...@gmail.com

unread,
Mar 19, 2015, 9:19:25 AM3/19/15
to jst...@googlegroups.com
Thanks for the reply. In test example I use only search plugin. I've prepared example in one file(without libraries). If you could look at this I'll be grateful. You can download it from: https://drive.google.com/open?id=0Bxey5QOt0iLwOUtDWG9KU1g3VWs&authuser=0

Ivan Bozhanov

unread,
Mar 19, 2015, 1:16:52 PM3/19/15
to jst...@googlegroups.com
Sorry, from the looks of it there is nothing I can do - open_all is not designed for such use cases, I thought about detaching the nodes, but that will no help much.

However you can take another approach - do not use open_all. Instead of $('#jstree').jstree(true).open_all(); use this:

var m = $('#jstree').jstree(true)._model.data, i;
for(i in m) {
    if(m.hasOwnProperty(i) && i !== '#') {
        m[i].state.opened = true;
    }
}
$('#jstree').jstree(true).redraw(true);

That will be many many times faster. You can also try setting core.worker to false, which will block the UI, but will load the tree 30%-50% faster.

The solution above is not something I can embed in jstree itself, as it is specific to your use case. Since you are dealing with 30K+ nodes, I believe it is a good solution - with this amount of nodes you have to be willing to accept custom solutions.
Let me know if the above works for you. I did not measure the exact difference because I could not wait for your example to finish processing, but the above completed in 3-4 seconds.

Best regards,
Ivan

zackw...@gmail.com

unread,
Mar 20, 2015, 9:51:36 AM3/20/15
to jst...@googlegroups.com
Thanks very much Ivan! It works great :). Open all by this custom way takes only 9sec on Chrome v41 and 19sec on FF v36. Maybe it isn't instant result but such big tree is not common so it is completly acceptable.
I've  tested also opening from given id of node using function below and it takes the same amount of time:
function fast_open(nodeId, m){
           
var node = m[nodeId];
            node
.state.opened = true;
           
for (i in node.children){
                fast_open
(node.children[i], m);
           
}
}

Ivan Bozhanov

unread,
Mar 20, 2015, 12:30:26 PM3/20/15
to jst...@googlegroups.com
If you need it from a node down - use node.children_d - it is much faster, and no need for recursion.
Glad it works!

Best regards,
Ivan
Message has been deleted

zackw...@gmail.com

unread,
May 4, 2015, 8:47:17 AM5/4/15
to jst...@googlegroups.com
My migration to jsTree3 was suspended, but now this topic is coming back, unfortunately with problem of conflicts between required version jQuery.  jsTree 3 require jQ v1.9.1, but large part of the remaining code used in project is based on older version of jQ
 that causes a lot of errors. Refactoring all uses of old jQ in my code would be very time consuming. So I dived into jsTree code in search of possibility of implementation something similar that you suggested my earlier for jsTree3. For me it's working too differently and I don't see such possibility. I know that v1 is not supported currently, but what do you think about it Ivan? It is possible to get better performance in opening all nodes also for jsTree v1 by similar "trick" like this showed by you for v3?

Ivan Bozhanov

unread,
May 4, 2015, 9:34:43 AM5/4/15
to jst...@googlegroups.com
Sorry, absolutely no idea about v.1 - I have not looked at the codebase in quite a while, and quite frankly - I do not have the time to do it. I focus all my energy and time on v.3 - sorry.

Best regards,
Ivan
Reply all
Reply to author
Forward
0 new messages