DOMPerformanceTest.js

// Testing DOM performance
(function (depth, width, tag, tag2) {
  console.log('Tree depth: ' + depth);
  console.log('Children per level ' + width);
  console.log('Tag to build tree with ' + tag);
  console.log('Replacement tag ' + tag2);
  
  console.time('maketree');
  var starttree = (function makeTree(depth, width, root, tag) {
    if (depth == 0) {
      return root || null;
    }
    if (! root) {
      var root = document.createElement('root');
    }
    for(var i=0; i < width; i ++) {
      newTag = document.createElement(tag);
      root.appendChild(newTag);
      makeTree(depth - 1, width, newTag, tag);
    }
    return root;
  })(depth, width, null, tag);
  
  console.timeEnd('maketree');
  console.log('Total number of nodes in tree: ' + starttree.getElementsByTagName(tag).length);
  console.time('changetree');
  
  var newTree = (function processTree(tree, fromTag, toTag) {
    for (var i = 0; i < tree.children.length; i++) {
      currentChild = tree.children[i];
      currentChild = processTree(currentChild, fromTag, toTag);
      if (currentChild.tagName === fromTag) {
        replacement = document.createElement(toTag);
        replacement.innerHTML = currentChild.innerHTML;
        tree.replaceChild(replacement, currentChild);
      }
    }
    return tree;
  })(starttree, tag, tag2);
  
  console.timeEnd('changetree');
  return newTree;
})(20, 2, 'DIV', 'SPAN');