Info

Comparing the init/render performance of various YUI TreeView implementations.

Preparation code

<div id="treeview"></div>

<script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>

<script src="http://smugmug.github.com/yui-gallery/build/gallery-sm-tree/gallery-sm-tree-min.js"></script>
<script src="http://smugmug.github.com/yui-gallery/build/gallery-sm-tree-node/gallery-sm-tree-node-min.js"></script>
<script src="http://smugmug.github.com/yui-gallery/build/gallery-sm-treeview/gallery-sm-treeview-min.js"></script>
<script src="http://smugmug.github.com/yui-gallery/build/gallery-sm-treeview-templates/gallery-sm-treeview-templates-min.js"></script>

<script>
var Y = YUI({fetchCSS: false}).use('gallery-sm-treeview', 'gallery-fwt-treeview');

// Separate YUI instances needed to avoid class name collisions.
var Y2 = YUI({fetchCSS: false}).use('gallery-yui3treeview');
var Y3 = YUI({fetchCSS: false}).use('gallery-yui3treeview-ng');
</script>
<script>
  Benchmark.prototype.setup = function() {
    var container = document.getElementById('treeview');
    
    // Generate a bunch of bogus data to fill the tree with.
    var nodes = [],
        typeNodes = [], // gallery-yui3treeview needs an extra "type" property on parent nodes, and this breaks gallery-fwt-treeview
        child, end, node, typeNode, start;
    
    for (var i = 0; i < 20; i++) {
      node = {label: 'Item ' + i};
      typeNode = {label: 'Item ' + i};
      
      // Fill every third node with 20 children.
      if (i % 3 === 0) {
        fillChildren(node, 20);
        fillChildren(typeNode, 20, null, true);
      }
    
      nodes.push(node);
      typeNodes.push(typeNode);
    }
    
    function fillChildren(parent, count, depth, includeType) {
      var child;
      
      if (!parent.children) {
        if (includeType) {
          parent.type = 'TreeView';
        }
    
        parent.children = [];
      }
      
      for (var i = 0; i < count; i++) {
        child = {label: 'Child ' + i};
        
        if (depth) {
          fillChildren(child, count, depth - 1);
        }
        
        parent.children.push(child);
      }
    }
    
  };

  Benchmark.prototype.teardown = function() {
    document.getElementById('treeview').innerHTML = '';
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

new Y.TreeView({
  container: container,
  nodes    : nodes
}).render();

new Y.FWTreeView({tree: nodes}).render(container);

new Y2.TreeView({children: typeNodes}).render(container);

new Y3.TreeView({children: nodes}).render(container);

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

• Revision 1: published by Ryan Grove on 19th December 2012
• Revision 2: published on 19th December 2012
• Revision 3: published by Ryan Grove on 21st December 2012 and last updated on 22nd December 2012
• Revision 4: published by Ryan Grove on 1st February 2013

0 comments