The following ways of increasing performance were introduced in dhtmlxTree (when working with huge data sets):
In case the tree contains large amount of nodes (or the user doesn't want to waste time on loading hidden nodes), it would be better to load them on request, not all at once. The functionality to load tree levels dynamically using XML was introduced for this purpose. Dynamical loading of items from XML stream gives the possibility to create DHTML trees with unlimited number of nodes.
First, in XML the user should indicate the nodes that will be loaded dynamically this way: add the parameter child=“1” to all nodes that have child items. The items containing this parameter will be objects for dynamical loading.
<?xml version="1.0" encoding="iso-8859-1" ?> <tree id="0"> <item text="Surveillance" id="a1" im0="book.gif" … child="1"/> <item …/> … </tree>
The method setXMLAutoLoading() switches the dynamical loading on in the tree:
<script> tree.setXMLAutoLoading(url); tree.loadXML(file); // load the first level of the tree </script>
The above mentioned snippet is useful in case of a tree with large amount of data. The system will first load the data indicated by loadXML() method. The script specified in setXMLAutoLoading() method will be called when the user clicks the tree to expand any of the parent nodes (which child nodes were not loaded). The script will get the id of the node to open, and return the XML with description of the child items.
It should be noted that when the tree is switched on dynamical loading, script methods work only for those items that are loaded at the moment.
The following method is responsible for specifying the way server side URL is constructed during dynamical loading calls:
<script> tree.setXMLAutoLoadingBehaviour(mode); </script>
The following modes variants are available here:
Mode setEscapingMode() is responsible for setting escaping mode (used for escaping id in requests). This method sets the mode for transferring itree item information to the server:
<script> tree.setEscapingMode(mode); </script>
The following modes are available:
The idea of Smart XML Parsing is simple: the entire tree structure is loaded on the client side, but only nodes that should be displayed are rendered. This helps to decrease loading time and general performance of large trees greatly. Plus, the entire tree structure is available for most of script methods (for example, searching is performed against all nodes, not only rendered ones).
To activate Smart XML Parsing, the user should apply the following method:
<script> tree.enableSmartXMLParsing(true); // false is used to disable </script>
Please, pay your attention to the fact that Smart XML Parsing does not work in case of loading fully expanded tree.
Parsing state can be got using getItemParsingState() method which takes item id as parameter:
<script> var state = tree.getItemParsingState(itemId); </script>
The method returns:
Another way to increase performance of the tree with some levels containing more than 100-200 nodes per level was introduced. This functionality is called Distributed Parsing. The main advantage of it lies in making the level visible and ready to use before it is completely parsed. Thus, items are loaded portion by portion with some timeouts.
To enable this functionality, the user should make use of the following JS command:
<script> tree.enableDistributedParsing(mode,count,delay); </script>
Parameters of this method are:
This functionaity is fully compatible with Smart XML Parsing.
Current state of Distributed Parsing can be easily got in the following way:
<script> var state = tree.getDistributedParsingState(); // returns true|false </script>
This method returns either true (meaning that parsing is still in process) or false (meaning that parsing is already finished).
In case the tree contains a lot of items per level (for instance, 500 and more), the user can increase overall performance using Smart Rendering mode. This mode allows loading big, not well-formed trees. There is no need for any changes in data structure to switch this mode on. It's just enableSmartRendering() method that should be used before loading data in tree:
<script> tree.enableSmartRendering(true); // false is used to switch the mode off </script>
The important thing that should be taken into account is that this mode is incompatible with Distributed Parsing and Three-state checkboxes.