Info

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

Note: The TreeviewLite test isn't quite an apples-to-apples comparison with the others. TreeviewLite doesn't dynamically render to the DOM like the other treeviews -- it requires an existing DOM structure. Also, we have to unplug the TreeviewLite plugin inside the test loop or else every subsequent loop would just be a noop.

Preparation code

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

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

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

// 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 = Y.one('#treeview'),
        ol        = Y.one('#treeviewlite'),
        nodes     = [],
        typeNodes = [], // gallery-yui3treeview needs an extra "type" property on parent nodes, and this breaks gallery-fwt-treeview
        child, li, node, typeNode;
    
    // Generate a bunch of bogus data to fill the trees with.
    for (var i = 0; i < 20; i++) {
      node     = {label: 'Item ' + i};
      typeNode = {label: 'Item ' + i};
      li       = Y.Node.create('<li><span>Item ' + i + '</span></li>');
      
      // Fill every third node with 20 children.
      if (i % 3 === 0) {
        fillChildren(node, 20);
        fillChildren(typeNode, 20, null, true);
        fillChildrenHtml(li, 20);
      }
      
      // Fill every tenth node with children to a depth of 50.
      if (i % 10 === 0) {
        fillChildren(node, 1, 50);
        fillChildren(typeNode, 1, 50, true);
        fillChildrenHtml(li, 1, 50);
      }
      
      nodes.push(node);
      typeNodes.push(typeNode);
      ol.append(li);
    }
    
    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);
      }
    }
    
    function fillChildrenHtml(parent, count, depth) {
      var list = parent.one('>ul'),
          child;
    
      if (!list) {
        list = Y.Node.create('<ul/>');
        parent.append(list);
      }
    
      for (var i = 0; i < count; i++) {
        child = Y.Node.create('<li><span>Child ' + i + '</span></li>');
    
        if (depth) {
          fillChildrenHtml(child, count, depth - 1);
        }
    
        list.append(child);
      }
    }
    
  };

  Benchmark.prototype.teardown = function() {
    Y.one('#treeview').empty();
    Y.one('#treeviewlite').empty();
  };
</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);

ol.plug(Y.Plugin.TreeviewLite);
ol.unplug(Y.Plugin.TreeviewLite);

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