StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This may be a late response, but a project I'm working on had the same problem, and the application has to run in IE7, so the performance was definitely not good. The core problem is when you have many nodes at one level, and we were dealing with hundreds if not over a thousand, causing the dreaded script-running dialog to popup.</p> <p>We recently replaced the use of dijit.Tree with our own tree implementation, finding the extra abstraction of the backing store unnecessary since the server already was the data abstraction layer. Hence, we have the server generate an HTML fragment, using divs and spans to represent the structure of the tree and custom attributes to associate data for each node. CSS is used to format the data visually.</p> <p>This approach leverages the intrinsic capability of the browser to process HTML. A few connections to mouse and keyboard events allows us to get full tree-based functionality (including tooltips for nodes) in an efficient manner. Here's a simplified example of the type of HTML structure our server generates:</p> <pre><code><div class="treeFolder"> <span class="treeFolderInd">+</span> <span class="treeFolderLabel">Folder label</span> <div class="treeFolderContent"> <div class="treeFolder"> <span class="treeFolderInd">+</span> <span class="treeFolderLabel">Sub-folder</span> <div class="treeFolderContent"> <div class="treeItem" my-action="doSomething" my-data="{arg1:'hello', arg2:'world'" my-tooltip="Goodbye"> <span class="treeItemInd">o</span> <span class="treeItemContent"> Item text </span> </div> <div class="treeItem" my-action="doSomethingElse" my-data="{arg1:'foo', arg2:'bar'}" my-tooltip="Another tip"> <span class="treeItemInd">o</span> <span class="treeItemContent"> Item text </span> </div> ... </code></pre> <p>The class names are used for CSS formatting. The various my-* attributes are the custom attributes that the client-side of the application uses to tie actions to when the user selects a tree node. We use a JSON string to represent in data, so dojo.fromJson() can be used on the attribute to get the data associated with the node (we internally cache the object created with the DOM node, so fromJson() does not have to be used each time the data is accessed.</p> <p>Our load times have drastically improved, with now the browser itself being the one taken the most amount of time to parse the HTML, but it is no worse than loading a large web page. Once the HTML data is loaded and we registered our event hooks, expanding a node with 5,000 items is fairly quick. We basically just toggle CSS display setting to expand/collapse folders, so you are basically limited to how the browser itself performs.</p> <p>Of course, one can create alternative structures to represent tree data, but I think you get the idea. We encapsulate the core functionality of the tree in a class with some virtual events to represent when an item is clicked and other tree actions. The user of the class just uses dojo.connect() to connect to which tree events of interest.</p> <p>Side Note: Creating dijit.Tooltip instances for all the items was a significant factor in slow performance. To get around that, we manage tooltip rendering ourselves by using dijit.showTooltip() and dijit.hideTooltip() directly vs creating dijit.Tooltip instances.</p> <p>One unfortunate thing for us is being stuck in IE7. IE7 degrades overall performance-wise when deal with large data sets, even if the system has plenty of RAM. IE8 and IE9 are much improved in this regard.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload