Add a basic benchmark for creating DOM.

sky/benchmarks/dom/creation.sky

+<sky>
+<import src="../resources/runner.sky" as="PerfRunner" />
+<script>
+var sky = document.documentElement;

[ojan, 2014/11/11 01:41:37]

document.querySelector('sky') ?

We're going to be removing documentElement at some point. May as well have one
fewer place to update.

[esprehn, 2014/11/11 01:44:52]

We're going to remove querySelector also, so all these places will need
updating.

+
+var widgets = 0;
+var basicElements = 0;
+var texts = 0;
+
+var WidgetPrototype = Object.create(HTMLElement.prototype);
+WidgetPrototype.createdCallback =  function() {
+  widgets++;
+  this.wasCreated = true;
+  this.wasAttached = false;
+  this.wasDetached = false;
+  this.attrsChanged = [];
+  this.createShadowRoot();
+};
+
+WidgetPrototype.attachedCallback = function() {
+    this.wasAttached = true;

[ojan, 2014/11/11 01:41:37]

indentation

+};
+
+WidgetPrototype.detachedCallback = function() {
+    this.wasDetached = true;

[ojan, 2014/11/11 01:41:37]

ditto

+};
+
+WidgetPrototype.attributeChangedCallback = function(name, oldValue, newValue) {
+  this.attrsChanged.push({
+    name: name,
+    oldValue: oldValue,
+    newValue: newValue,
+  });
+};
+
+var Widget = document.registerElement("x-widget", {
+  prototype: WidgetPrototype,
+});
+
+function createElement(tagName) {
+  basicElements++;
+  return document.createElement(tagName);
+}
+
+function createText(text) {
+  texts++;
+  return document.createTextNode(text);
+}
+
+function createElements(root, depth) {
+  for (var i = 0; i < 4; i++) {
+    var div = createElement("div");
+    var span1 = div.appendChild(createElement("span"));
+    span1.appendChild(createText("foo"));
+    span1.setAttribute("id", "span" + (i * depth));
+    div.appendChild(createText(" "));
+    div.setAttribute("class", "b" + i + " a" + i);
+    var span2 = div.appendChild(createElement("span"));
+    span2.appendChild(createText("bar"));
+    var widget = span2.appendChild(new Widget());
+    widget.setAttribute("id", "widget-" + (i * depth));
+    widget.setAttribute("custom", "example attribute");
+    widget.setAttribute("custom2", "example attribute2");
+    root.appendChild(div);
+    if (depth)
+      createElements(widget.shadowRoot, depth - 1);
+  }
+}
+
+var runner = new PerfRunner({
+  setup: function() {
+    widgets = 0;
+    basicElements = 0;
+    texts = 0;
+  },
+  iterations: 10,
+  unit: "ms",
+});
+
+runner.runAsync(function(done) {
+  var root = createElement("div");
+  sky.appendChild(root);
+  createElements(root, 3);
+  root.remove();
+  // console.log("widgets: " + widgets);

[ojan, 2014/11/11 01:41:37]

Did you mean to include these?

[esprehn, 2014/11/11 01:44:52]

Yes, that way you can see how much DOM is actually created and if you update the
constants you can see how much you added/removed from the benchmark.

+  // console.log("basic elements: " + basicElements);
+  // console.log("texts: " + texts);
+  // CONSOLE: LOG: widgets: 340
+  // CONSOLE: LOG: basic elements: 1021
+  // CONSOLE: LOG: texts: 1020
+  done();
+});
+</script>
+</sky>