perf(benchmarks): benchmark measuring cost of decorators (fixes #1479)

2015-04-26 11:35:25 -07:00
parent 6dece68bb8
commit 9fc9d53566
6 changed files with 155 additions and 1 deletions
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<body>
+
+<h2>Params</h2>
+<form>
+  Size:
+  <input type="number" name="size" placeholder="size" value="100">
+  <br>
+  <button>Apply</button>
+</form>
+
+<h2>Benchmarks</h2>
+<button id="reset">Reset</button>
+<table>
+<tr>
+  <td>Baseline (plain components)</td>
+  <td><button id="createPlainComponents">Run</button></td>
+</tr>
+<tr>
+  <td>Cost of decorators</td>
+  <td><button id="createComponentsWithDecorators">Run</button></td>
+</tr>
+</table>
+
+<app></app>
+
+$SCRIPTS$
+</body>
+</html>
@@ -0,0 +1,89 @@
+import {
+  bootstrap,
+  Component,
+  Decorator,
+  View
+} from 'angular2/angular2';
+import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
+import {List, ListWrapper} from 'angular2/src/facade/collection';
+import {reflector} from 'angular2/src/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
+import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
+import {If, For} from 'angular2/directives';
+
+var testList = null;
+
+export function main() {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  var size = getIntParameter('size');
+  testList = ListWrapper.createFixedSize(size);
+
+  bootstrap(AppComponent).then((ref) => {
+    var injector = ref.injector;
+    var app:AppComponent = injector.get(AppComponent);
+    var lifeCycle = injector.get(LifeCycle);
+
+    bindAction('#reset', function() {
+      app.reset();
+      lifeCycle.tick();
+    });
+
+    // Baseline (plain components)
+    bindAction('#createPlainComponents', function() {
+      app.createPlainComponents();
+      lifeCycle.tick();
+    });
+
+    // Components with decorators
+    bindAction('#createComponentsWithDecorators', function() {
+      app.createComponentsWithDecorators();
+      lifeCycle.tick();
+    });
+  });
+}
+
+@Component({selector: 'app'})
+@View({
+  directives: [If, For, DummyComponent, DummyDecorator],
+  template: `
+    <div *if="testingPlainComponents">
+      <dummy *for="#i of list"></dummy>
+    </div>
+
+    <div *if="testingWithDecorators">
+      <dummy dummy-decorator *for="#i of list"></dummy>
+    </div>
+  `
+})
+class AppComponent {
+  list:List;
+  testingPlainComponents:boolean;
+  testingWithDecorators:boolean;
+
+  constructor() {
+    this.reset();
+  }
+
+  reset():void {
+    this.list = [];
+    this.testingPlainComponents = false;
+    this.testingWithDecorators = false;
+  }
+
+  createPlainComponents():void {
+    this.list = testList;
+    this.testingPlainComponents = true;
+  }
+
+  createComponentsWithDecorators():void {
+    this.list = testList;
+    this.testingWithDecorators = true;
+  }
+}
+
+@Component({selector: 'dummy'})
+@View({template: `<div></div>`})
+class DummyComponent {}
+
+@Decorator({selector: '[dummy-decorator]'})
+class DummyDecorator {}
@@ -26,6 +26,9 @@
    <li>
      <a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
    </li>
+    <li>
+      <a href="costs/index.html">Benchmarks measuring costs of things</a>
+    </li>
  </ul>
 </body>
 </html>