diff --git a/modules/benchmarks/e2e_test/costs_perf.es6 b/modules/benchmarks/e2e_test/costs_perf.es6 index be7633992e..ff50681b93 100644 --- a/modules/benchmarks/e2e_test/costs_perf.es6 +++ b/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); }); diff --git a/modules/benchmarks/src/costs/index.html b/modules/benchmarks/src/costs/index.html index 12d33f09ff..5c30dada56 100644 --- a/modules/benchmarks/src/costs/index.html +++ b/modules/benchmarks/src/costs/index.html @@ -21,6 +21,10 @@ Cost of decorators + + Cost of dynamic components + + diff --git a/modules/benchmarks/src/costs/index.js b/modules/benchmarks/src/costs/index.js index c57267fe73..6394d4c871 100644 --- a/modules/benchmarks/src/costs/index.js +++ b/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: `
@@ -53,12 +62,17 @@ export function main() {
+ +
+ +
` }) 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); + } +}