perf(benchmarks): benchmark that measure cost of dynamic components

Author: yjbanov

modules/benchmarks/e2e_test/costs_perf.es6

@@ -3,6 +3,8 @@ var perfUtil = require('angular2/src/test_lib/perf_util');
 describe('ng2 cost benchmark', function () {
 
   var URL = 'benchmarks/src/costs/index.html';
+
+  // Number of components to create in a single iteration
   var benchmarkSize = 200;
 
   afterEach(perfUtil.verifyNoBrowserErrors);
@@ -13,7 +15,7 @@ describe('ng2 cost benchmark', function () {
       buttons: ['#reset', '#createPlainComponents'],
       id: 'ng2.costs.baseline',
       params: [{
-        name: 'size', value: 200, scale: 'linear'
+        name: 'size', value: benchmarkSize, scale: 'linear'
       }]
     }).then(done, done.fail);
   });
@@ -24,7 +26,18 @@ describe('ng2 cost benchmark', function () {
       buttons: ['#reset', '#createComponentsWithDecorators'],
       id: 'ng2.costs.decorators',
       params: [{
-        name: 'size', value: 200, scale: 'linear'
+        name: 'size', value: benchmarkSize, scale: 'linear'
+      }]
+    }).then(done, done.fail);
+  });
+
+  it('should log stats for dynamic components', function(done) {
+    perfUtil.runClickBenchmark({
+      url: URL,
+      buttons: ['#reset', '#createDynamicComponents'],
+      id: 'ng2.costs.dynamic',
+      params: [{
+        name: 'size', value: benchmarkSize, scale: 'linear'
       }]
     }).then(done, done.fail);
   });

modules/benchmarks/src/costs/index.html

@@ -21,6 +21,10 @@ <h2>Benchmarks</h2>
   <td>Cost of decorators</td>
   <td><button id="createComponentsWithDecorators">Run</button></td>
 </tr>
+<tr>
+  <td>Cost of dynamic components</td>
+  <td><button id="createDynamicComponents">Run</button></td>
+</tr>
 </table>
 
 <app></app>

modules/benchmarks/src/costs/index.js

@@ -2,7 +2,10 @@ import {
   bootstrap,
   Component,
   Decorator,
-  View
+  View,
+  DynamicComponentLoader,
+  ElementRef,
+  DynamicComponent
 } from 'angular2/angular2';
 import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
 import {List, ListWrapper} from 'angular2/src/facade/collection';
@@ -39,12 +42,18 @@ export function main() {
       app.createComponentsWithDecorators();
       lifeCycle.tick();
     });
+
+    // Components with decorators
+    bindAction('#createDynamicComponents', function() {
+      app.createDynamicComponents();
+      lifeCycle.tick();
+    });
   });
 }
 
 @Component({selector: 'app'})
 @View({
-  directives: [If, For, DummyComponent, DummyDecorator],
+  directives: [If, For, DummyComponent, DummyDecorator, DynamicDummy],
   template: `
     <div *if="testingPlainComponents">
       <dummy *for="#i of list"></dummy>
@@ -53,12 +62,17 @@ export function main() {
     <div *if="testingWithDecorators">
       <dummy dummy-decorator *for="#i of list"></dummy>
     </div>
+
+    <div *if="testingDynamicComponents">
+      <dynamic-dummy *for="#i of list"></dynamic-dummy>
+    </div>
   `
 })
 class AppComponent {
   list:List;
   testingPlainComponents:boolean;
   testingWithDecorators:boolean;
+  testingDynamicComponents:boolean;
 
   constructor() {
     this.reset();
@@ -68,6 +82,7 @@ class AppComponent {
     this.list = [];
     this.testingPlainComponents = false;
     this.testingWithDecorators = false;
+    this.testingDynamicComponents = false;
   }
 
   createPlainComponents():void {
@@ -79,6 +94,11 @@ class AppComponent {
     this.list = testList;
     this.testingWithDecorators = true;
   }
+
+  createDynamicComponents():void {
+    this.list = testList;
+    this.testingDynamicComponents = true;
+  }
 }
 
 @Component({selector: 'dummy'})
@@ -87,3 +107,10 @@ class DummyComponent {}
 
 @Decorator({selector: '[dummy-decorator]'})
 class DummyDecorator {}
+
+@DynamicComponent({selector: 'dynamic-dummy'})
+class DynamicDummy {
+  constructor(loader:DynamicComponentLoader, location:ElementRef) {
+    loader.loadIntoExistingLocation(DummyComponent, location);
+  }
+}