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);
+ }
+}