feat(benchmarks): add static tree benchmark

2016-09-01 10:29:35 -07:00
parent 4287f1716d
commit eef4c22e87
8 changed files with 120 additions and 371 deletions
--- a/modules/benchmarks/src/tree/ng2_static/index.html
+++ b/modules/benchmarks/src/tree/ng2_static/index.html
@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<body>
+  <h2>Params</h2>
+  <form>
+    Depth:
+    <input type="number" name="depth" placeholder="depth" value="9">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Angular2 tree benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <tree id="root"></tree>
+  </div>
+
+  <script src="../../bootstrap_ng2.js"></script>
+</body>
+</html>
--- a/modules/benchmarks/src/tree/ng2_static/index.ts
+++ b/modules/benchmarks/src/tree/ng2_static/index.ts
@ -0,0 +1,40 @@
+import {ApplicationRef, NgModule, enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+
+import {bindAction, profile} from '../../util';
+import {TreeNode, buildTree, emptyTree} from '../util';
+
+import {AppModule, RootTreeComponent} from './tree';
+
+export function main() {
+  var tree: RootTreeComponent;
+  var appRef: ApplicationRef;
+
+  function destroyDom() {
+    tree.data = emptyTree;
+    appRef.tick();
+  }
+
+  function createDom() {
+    tree.data = buildTree();
+    appRef.tick();
+  }
+
+  function noop() {}
+
+  function init() {
+    enableProdMode();
+    platformBrowserDynamic().bootstrapModule(AppModule).then((ref) => {
+      const injector = ref.injector;
+      appRef = injector.get(ApplicationRef);
+
+      tree = appRef.components[0].instance;
+      bindAction('#destroyDom', destroyDom);
+      bindAction('#createDom', createDom);
+      bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+      bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+    });
+  }
+
+  init();
+}
--- a/modules/benchmarks/src/tree/ng2_static/tree.ts
+++ b/modules/benchmarks/src/tree/ng2_static/tree.ts
@ -0,0 +1,40 @@
+import {Component, Input, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+
+import {TreeNode, emptyTree, maxDepth} from '../util';
+
+function createTreeComponent(level: number, isLeaf: boolean) {
+  const nextTreeEl = `tree${level+1}`;
+  const template = isLeaf ?
+      `<span> {{data.value}} </span>` :
+      `<span> {{data.value}} <span><${nextTreeEl} [data]='data.right'></${nextTreeEl}></span><span><${nextTreeEl} [data]='data.left'></${nextTreeEl}></span></span>`;
+
+  @Component({selector: `tree${level}`, template: template})
+  class TreeComponent {
+    @Input()
+    data: TreeNode;
+  }
+
+  return TreeComponent;
+}
+
+@Component({selector: 'tree', template: `<tree0 *ngIf="data.left != null" [data]='data'></tree0>`})
+export class RootTreeComponent {
+  @Input()
+  data: TreeNode = emptyTree;
+}
+
+function createModule(): any {
+  const components: any[] = [RootTreeComponent];
+  for (var i = 0; i <= maxDepth; i++) {
+    components.push(createTreeComponent(i, i === maxDepth));
+  }
+
+  @NgModule({imports: [BrowserModule], bootstrap: [RootTreeComponent], declarations: [components]})
+  class AppModule {
+  }
+
+  return AppModule;
+}
+
+export const AppModule = createModule();