Rendering of large trees is slow (1000+ nodes)

I have a tree with over 1000 nodes and it is taking a long time to render (45+ seconds). I’ve tried a few things to tidy that up (the browser layout stage is taking most of the time) but they are not quite working.

As I see it, every node is added to the display and the browser re-renders the layout (time-consuming). If I set the treant-id to display:hidden then back after the render, it is 6 seconds!

However, the render is squashed up into a tiny div! I’m guessing that because the div is hidden during render it has 0 height/width and you are depending on those to render properly.

I had the idea of trying to render to an unattached DOM element then attaching it, but it did not like that as it needs the #treant-id element to be in the DOM to work.

Would an enhancement be to render the tree to an unattached DOM element before passing it back to the DOM? I’m looking in the codebase now for an opportunity to do this.

Any other ideas for speedups?

[yinxs]

Lines has to be drawn to the real document, not fragment. Original description fixed.

Thanks! I implemented all your suggested fixes and it works like a charm. It’s now blazing fast in comparison. I even got it to work in IE (the organization I work for just won’t let that one go) by changing node.remove(); to tree.testArea.removeChild(node); although I hope that was the correct way to do it. Anyway, great fix and thanks again!

[mpil2]

That solution works fine in Chromium based browsers here, but in Firefox everything turned out all wrong. Connectors were drawn away from the nodes, and outside of the divs the were supposed to be drawn into. Nodes couldn’t be interacted with anymore. Maybe it’s something small, but JS is not my strong suit. Too bad, because with around 1500 nodes, speed could definitely use a boost!

Sorry for confusing, my description was slightly misleading, drawing lines in reset function, i.e. line this._R = new Raphael( this.drawArea, 100, 100 ); has to be as the last, just before “return this”. Lines has to be drawn to the real document, not fragment. Original description fixed.