Super Fast Tree View in JavaScript
I thought I'd share a way of writing your JavaScript that will make a tree view hierarchy render and respond very quickly.
Firstly, the demo. I've got 100,000 items, quite a hefty data set, which is randomly generated in a function. You can change the number of items easily in the JS area. Click on the + or - icons to expand or collapse nodes.
[codepen_embed height="520" theme_id="dark" slug_hash="WawYKX" default_tab="result" user="chris22smith" editable="true" data-editable="true"]See the Pen Super Fast JavaScript Data Tree by Chris Smith (@chris22smith) on CodePen.[/codepen_embed]
It's still quick, like instant, with 100,000 items. It can start to slow a little at a million but I'd say it's still acceptable given that kind of data.
One Long List
The trick is in how the data is structured. It's one big array, not hierarchical data with objects inside other objects. The reason for this is pretty simple, it's all about iterations or looping. If you have a single array you can run through the whole list of items once. If it's nested you have to get into loops inside other loops and it gets more complicated and takes longer. In fact, you'd be lucky for it to work at all without getting stack overflow errors.JavaScript Magic
With a single array you can use the built in JavaScript Array methods, which are very fast - map(), filter() and some(). I'd definitely recommend reading up on these. All three work in IE9+ so hopefully you shouldn't have to worry too much about browser support.I use map() to convert each data item into a HTML list item which I can insert into the DOM. I use filter() to quickly find the children items of any item by returning a subset, and I use some() to see if an item has children. The beauty of some() is that once its found it child it stops iterating, saving time.