From 9fc9d535667c620017367877dbc2a3bc56d358b7 Mon Sep 17 00:00:00 2001 From: Yegor Jbanov Date: Sun, 26 Apr 2015 11:35:25 -0700 Subject: [PATCH] perf(benchmarks): benchmark measuring cost of decorators (fixes #1479) --- modules/angular2/src/dom/browser_adapter.es6 | 2 +- modules/benchmarks/e2e_test/costs_perf.es6 | 31 +++++++ modules/benchmarks/pubspec.yaml | 1 + modules/benchmarks/src/costs/index.html | 30 +++++++ modules/benchmarks/src/costs/index.js | 89 ++++++++++++++++++++ modules/benchmarks/src/index.html | 3 + 6 files changed, 155 insertions(+), 1 deletion(-) create mode 100644 modules/benchmarks/e2e_test/costs_perf.es6 create mode 100644 modules/benchmarks/src/costs/index.html create mode 100644 modules/benchmarks/src/costs/index.js diff --git a/modules/angular2/src/dom/browser_adapter.es6 b/modules/angular2/src/dom/browser_adapter.es6 index ddabf8a038..e2850d9e20 100644 --- a/modules/angular2/src/dom/browser_adapter.es6 +++ b/modules/angular2/src/dom/browser_adapter.es6 @@ -102,7 +102,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter { nodeValue(node:Node):string { return node.nodeValue; } - type(node:string) { + type(node:Node) { return node.type; } content(node:HTMLElement):Node { diff --git a/modules/benchmarks/e2e_test/costs_perf.es6 b/modules/benchmarks/e2e_test/costs_perf.es6 new file mode 100644 index 0000000000..be7633992e --- /dev/null +++ b/modules/benchmarks/e2e_test/costs_perf.es6 @@ -0,0 +1,31 @@ +var perfUtil = require('angular2/src/test_lib/perf_util'); + +describe('ng2 cost benchmark', function () { + + var URL = 'benchmarks/src/costs/index.html'; + var benchmarkSize = 200; + + afterEach(perfUtil.verifyNoBrowserErrors); + + it('should log stats for baseline (plain components)', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#reset', '#createPlainComponents'], + id: 'ng2.costs.baseline', + params: [{ + name: 'size', value: 200, scale: 'linear' + }] + }).then(done, done.fail); + }); + + it('should log stats for components with decorators', function(done) { + perfUtil.runClickBenchmark({ + url: URL, + buttons: ['#reset', '#createComponentsWithDecorators'], + id: 'ng2.costs.decorators', + params: [{ + name: 'size', value: 200, scale: 'linear' + }] + }).then(done, done.fail); + }); +}); diff --git a/modules/benchmarks/pubspec.yaml b/modules/benchmarks/pubspec.yaml index 7b5c8ba23d..0f88b48203 100644 --- a/modules/benchmarks/pubspec.yaml +++ b/modules/benchmarks/pubspec.yaml @@ -18,6 +18,7 @@ transformers: - angular2: entry_points: - web/src/compiler/compiler_benchmark.dart + - web/src/costs/index.dart - web/src/di/di_benchmark.dart - web/src/element_injector/element_injector_benchmark.dart - web/src/largetable/largetable_benchmark.dart diff --git a/modules/benchmarks/src/costs/index.html b/modules/benchmarks/src/costs/index.html new file mode 100644 index 0000000000..12d33f09ff --- /dev/null +++ b/modules/benchmarks/src/costs/index.html @@ -0,0 +1,30 @@ + + + + +

Params

+
+ Size: + +
+ +
+ +

Benchmarks

+ + + + + + + + + + +
Baseline (plain components)
Cost of decorators
+ + + +$SCRIPTS$ + + \ No newline at end of file diff --git a/modules/benchmarks/src/costs/index.js b/modules/benchmarks/src/costs/index.js new file mode 100644 index 0000000000..c57267fe73 --- /dev/null +++ b/modules/benchmarks/src/costs/index.js @@ -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: ` +
+ +
+ +
+ +
+ ` +}) +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: `
`}) +class DummyComponent {} + +@Decorator({selector: '[dummy-decorator]'}) +class DummyDecorator {} diff --git a/modules/benchmarks/src/index.html b/modules/benchmarks/src/index.html index a0759be235..74df5f249b 100644 --- a/modules/benchmarks/src/index.html +++ b/modules/benchmarks/src/index.html @@ -26,6 +26,9 @@
  • Largetable benchmark
    • +
  • + Benchmarks measuring costs of things +