YUI TreeView shootout

JavaScript performance comparison

Revision 2 of this test case created

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.

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…

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