feat(benchmarks): add polymer_leaves benchmark

2016-08-30 13:44:52 -07:00
parent 873233e825
commit f7b5478e9f
5 changed files with 112 additions and 9 deletions
--- a/modules/benchmarks/src/tree/polymer_leaves/index.html
+++ b/modules/benchmarks/src/tree/polymer_leaves/index.html
@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<head>
+  <link rel="import" href="tree_leaf.html">
+</head>
+<body>
+
+<h2>Params</h2>
+<form>
+  Depth:
+  <input type="number" name="depth" placeholder="depth" value="9">
+  <br>
+  <button>Apply</button>
+</form>
+
+<h2>Polymer tree benchmark</h2>
+<p>
+<button id="destroyDom">destroyDom</button>
+<button id="createDom">createDom</button>
+</p>
+
+<div>
+<binary-tree id="app"></binary-tree>
+</div>
+
+<script src="../../bootstrap.js"></script>
+
+</body>
+</html>
--- a/modules/benchmarks/src/tree/polymer_leaves/index.ts
+++ b/modules/benchmarks/src/tree/polymer_leaves/index.ts
@ -0,0 +1,38 @@
+import {bindAction} from '@angular/platform-browser/testing/benchmark_util';
+
+import {TreeNode, buildTree, emptyTree} from '../app/util';
+
+declare var Polymer: any;
+
+export function main() {
+  const rootEl: any = document.querySelector('binary-tree');
+
+  rootEl.data = emptyTree();
+
+  function destroyDom() {
+    while (rootEl.firstChild) rootEl.removeChild(rootEl.firstChild);
+  }
+
+  function createDom() {
+    const flatTree = flattenTree(buildTree(), []);
+    for (var i = 0; i < flatTree.length; i++) {
+      const el: any = document.createElement('tree-leaf');
+      el.value = flatTree[i];
+      rootEl.appendChild(el);
+    }
+  }
+
+  bindAction('#destroyDom', destroyDom);
+  bindAction('#createDom', createDom);
+}
+
+function flattenTree(node: TreeNode, target: string[]): string[] {
+  target.push(node.value);
+  if (node.left) {
+    flattenTree(node.left, target);
+  }
+  if (node.right) {
+    flattenTree(node.right, target);
+  }
+  return target;
+}
--- a/modules/benchmarks/src/tree/polymer_leaves/tree_leaf.html
+++ b/modules/benchmarks/src/tree/polymer_leaves/tree_leaf.html
@ -0,0 +1,14 @@
+<link rel="import" href="/all/benchmarks/vendor/polymer/polymer.html">
+<dom-module id="tree-leaf">
+  <template>
+    <span>{{value}}</span>
+  </template>
+  <script>
+    Polymer({
+      is: 'tree-leaf',
+      properties: {
+        value: ''
+      }
+    });
+  </script>
+</dom-module>