YUI TreeView shootout

JavaScript performance comparison

Revision 4 of this test case created by Ryan Grove

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

<div id="treeview"></div> <ol id="treeviewlite"></ol> <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>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
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.

0 Comments