virtual-dom-vs-real-dom

JavaScript performance comparison

Test case created by

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  var todosLeft = 5;
  var route = 'all';
  var todosCompleted = 3;
  
  function virtualH(tagName, props, children) {
      if (Array.isArray(props) || typeof props === 'string') {
          children = props;
          props = {};
      }
      children = children || [];
      if (typeof children === 'string') {
          children = [children];
      }
  
      return {
          tagName: tagName,
          props: props || {},
          childNodes: children.map(function toNode(n) {
              if (typeof n === 'string') {
                  return { data: n };
              } else {
                  return n;
              }
          })
      };
  }
  
  //
  function domH(tagName, props, children) {
      if (Array.isArray(props) || typeof props === 'string') {
          children = props;
          props = {};
      }
      children = children || [];
      props = props || {};
      if (typeof children === 'string') {
          children = [children];
      }
  
      var node = document.createElement(tagName);
      Object.keys(props).forEach(function setProp(propName) {
          node[propName] = props[propName];
      });
  
      children.forEach(function addNode(n) {
          if (typeof n === 'string') {
              node.appendChild(document.createTextNode(n));
          } else {
              node.appendChild(n);
          }
      });
      return node;
  }
  
  function virtualLink(uri, text, isSelected) {
      return virtualH('li', [
          virtualH('a', {
              className: isSelected ? 'selected' : '',
              href: uri
          }, text)
      ]);
  }
  
  function domLink(uri, text, isSelected) {
      return domH('li', [
          domH('a', {
              className: isSelected ? 'selected' : '',
              href: uri
          }, text)
      ]);
  }
  

};
</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
virtual-dom
var tree = virtualH('footer', {
    id: 'footer',
    className: 'footer'
}, [
    virtualH('span', {
        id: 'todo-count',
        className: 'todo-count'
    }, [
        virtualH('strong', String(todosLeft)),
        todosLeft === 1 ? ' item' : ' items',
        ' left'
    ]),
    virtualH('ul', {
        id: 'filters',
        className: 'filters'
    }, [
        virtualLink('#/', 'All', route === 'all'),
        virtualLink('#/active', 'Active', route === 'active'),
        virtualLink('#/completed', 'Completed', route === 'completed')
    ]),
    virtualH('button', {
        id: 'clear-completed',
        className: 'clear-completed',
        hidden: todosCompleted === 0
    }, 'Clear completed (' + String(todosCompleted) + ')')
]);
return tree;
pending…
real-dom
var tree = domH('footer', {
    id: 'footer',
    className: 'footer'
}, [
    domH('span', {
        id: 'todo-count',
        className: 'todo-count'
    }, [
        domH('strong', String(todosLeft)),
        todosLeft === 1 ? ' item' : ' items',
        ' left'
    ]),
    domH('ul', {
        id: 'filters',
        className: 'filters'
    }, [
        domLink('#/', 'All', route === 'all'),
        domLink('#/active', 'Active', route === 'active'),
        domLink('#/completed', 'Completed', route === 'completed')
    ]),
    domH('button', {
        id: 'clear-completed',
        className: 'clear-completed',
        hidden: todosCompleted === 0
    }, 'Clear completed (' + String(todosCompleted) + ')')
]);
return tree;
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