YUI TreeView shootout

JavaScript performance comparison

Revision 6 of this test case created

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.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-selectable/gallery-sm-tree-selectable-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-tree-node-selectable/gallery-sm-tree-node-selectable-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', '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.

    Testing in unknown unknown
    Test Ops/sec
    SmugMug TreeView
    new Y.TreeView({
      container: container,
      nodes: nodes
    }).render();
    pending…
    Flyweight TreeView
    new Y.FWTreeView({
      tree: nodes
    }).render(container);
    pending…
    gallery-yui3treeview
    new Y2.TreeView({
      children: typeNodes
    }).render(container);
    pending…
    gallery-yui3treeview-ng
    new Y3.TreeView({
      children: nodes
    }).render(container);
    pending…
    gallery-treeviewlite
    ol.plug(Y.Plugin.TreeviewLite);
    ol.unplug(Y.Plugin.TreeviewLite);
    pending…

    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:

    0 comments

    Add a comment