vakata / jstree

jquery tree plugin
http://jstree.com
MIT License
5.15k stars 1.38k forks source link

Slow search for very large tree #2514

Closed miyakoj closed 3 years ago

miyakoj commented 3 years ago

We have a tree with 37k+ nodes that we would like to be filtered as the user types and only display the matching nodes (and their ancestors). This is extremely slow and usually causes the browser tab to freeze. Is there a way to improve performance with this?

Is filtering the nodes manually and then recreating the tree with just the matching nodes (and ancestors) a good alternate solution?

Thanks.

vakata commented 3 years ago

Traversing 37k nodes will be slow sometimes, but jstree generally searches using the internal state, so it should not be that slow. Did you make sure to add some kind of debounce (do not search on each keyup event)? Also - do you use a custom search function - if so - make sure you do not touch the DOM in it.

miyakoj commented 3 years ago

The spec is to search on each keyup. I created a custom search function believing it was the search that took so long, not the actual filtering of the nodes. The custom search function (which runs on each keyup) completes in a reasonable amount of time. Running a search only after a search button is clicked is fast enough using the built in search. Is there no way to filter while typing on a tree this large?

vakata commented 3 years ago

Of course it is - just use some kind of debounce to avoid triggering the search multiple times (as stated in the original reply). Google debounce if that is not familiar - basically - use a small timeout (imperceivable to the user) that would mean the search is only triggered when needed. For example - searching for "node" will trigger the search 4 times in a row, but using a reasonable timeout it will only be triggered when the user slows down or stops typing.

miyakoj commented 3 years ago

It's still too slow with the debounce, but I'll present it. Thank you.