Dynatree stores the nodes in an internal structure.
'Rendering' is the process of creating or updating HTML elements in
the DOM to
reflect the tree's status.
For example the last node in a branch has a special class name, so
appending a
node requires removing this class from the previous 'last node' and
adding it to
the new one.
Every time you call .addChild(data), the rendering is triggered.
If you pass 100 nodes with one call, the rendering is done only once,
so
this is always more performant than calling it 100 times with one
single node.
Currently (release 0.5.4) addChild uses this pattern:
var prevFlag = tree.enableUpdate(false);
[modify the tree]
tree.enableUpdate(prevFlag);
enableUpdate(true) calls tree.redraw(), so the whole tree is updated.
This will
change with release 1.0, but even then it will be faster to combine
addChild
calls.
Another aspect is: when are nodes created in the DOM.
Starting with 1.0 creation of HTML elements is deferred until the node
becomes
visible (expanded) for the first time.
So it is possible to load a very large number of nodes into the efficient
internal Dynatree data strucure without bloating the DOM.
If it is more user friendly to pre-load the whole tree, or lazy-load
single
branches on demand depends on server, network and client. So it's
always
a matter of benchmarking the different scenarios.