marko/benchmark/vdom/benchmark-walk.js

module.exports = function(app) {
  var Suite = window.Benchmark.Suite;
  var MarkoVDOM = app.vdom;

  var suite = new Suite("walk");

  var todomvcDOM = document.getElementById("todoapp");
  var todomvcDOMVirtual = MarkoVDOM.virtualize(todomvcDOM);

  function toHTML(node) {
    // NOTE: We don't use XMLSerializer because we need to sort the attributes to correctly compare output HTML strings
    // BAD: return (new XMLSerializer()).serializeToString(node);
    var html = "";
    function serializeHelper(node, indent) {
      if (node.nodeType === 1) {
        serializeElHelper(node, indent);
      } else if (node.nodeType === 3) {
        serializeTextHelper(node, indent);
      } else if (node.nodeType === 8) {
        serializeCommentHelper(node, indent);
      } else {
        console.log("Invalid node:", node);
        html += indent + `INVALID NODE TYPE ${node.nodeType}\n`;
        // throw new Error('Unexpected node type');
      }
    }

    function serializeElHelper(el, indent) {
      var tagName = el.nodeName;

      if (el.namespaceURI === "http://www.w3.org/2000/svg") {
        tagName = "svg:" + tagName;
      } else if (el.namespaceURI === "http://www.w3.org/1998/Math/MathML") {
        tagName = "math:" + tagName;
      }

      html += indent + "<" + tagName;

      var attributes = el.attributes;
      var attributesArray = [];

      for (var i = 0; i < attributes.length; i++) {
        var attr = attributes[i];
        var attrName = attr.name;
        if (attr.namespaceURI) {
          attrName = attr.namespaceURI + ":" + attrName;
        }
        attributesArray.push(" " + attrName + '="' + attr.value + '"');
      }

      attributesArray.sort();

      html += attributesArray.join("");

      html += ">\n";

      if (tagName.toUpperCase() === "TEXTAREA") {
        html += indent + "  VALUE: " + JSON.stringify(el.value) + "\n";
      } else {
        var curChild = el.firstChild;
        while (curChild) {
          serializeHelper(curChild, indent + "  ");
          curChild = curChild.nextSibling;
        }
      }
    }

    function serializeTextHelper(node, indent) {
      html += indent + JSON.stringify(node.nodeValue) + "\n";
    }

    function serializeCommentHelper(node, indent) {
      html += indent + "<!--" + JSON.stringify(node.nodeValue) + "-->\n";
    }

    serializeHelper(node, "");

    return html;
  }

  // add tests
  suite.add("real DOM", function() {
    return toHTML(todomvcDOM);
  });

  suite.add("marko-vdom", function() {
    return toHTML(todomvcDOMVirtual);
  });

  return function() {
    return app.runSuite(suite);
  };
};