Skip to content

Commit 9fc9d53

Browse files
yjbanovyjbanov
committed
perf(benchmarks): benchmark measuring cost of decorators (fixes angular#1479)
1 parent 6dece68 commit 9fc9d53

6 files changed

Lines changed: 155 additions & 1 deletion

File tree

‎modules/angular2/src/dom/browser_adapter.es6‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
102102
nodeValue(node:Node):string {
103103
return node.nodeValue;
104104
}
105-
type(node:string) {
105+
type(node:Node) {
106106
return node.type;
107107
}
108108
content(node:HTMLElement):Node {

‎modules/benchmarks/e2e_test/costs_perf.es6‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
var perfUtil = require('angular2/src/test_lib/perf_util');
2+
3+
describe('ng2 cost benchmark', function () {
4+
5+
var URL = 'benchmarks/src/costs/index.html';
6+
var benchmarkSize = 200;
7+
8+
afterEach(perfUtil.verifyNoBrowserErrors);
9+
10+
it('should log stats for baseline (plain components)', function(done) {
11+
perfUtil.runClickBenchmark({
12+
url: URL,
13+
buttons: ['#reset', '#createPlainComponents'],
14+
id: 'ng2.costs.baseline',
15+
params: [{
16+
name: 'size', value: 200, scale: 'linear'
17+
}]
18+
}).then(done, done.fail);
19+
});
20+
21+
it('should log stats for components with decorators', function(done) {
22+
perfUtil.runClickBenchmark({
23+
url: URL,
24+
buttons: ['#reset', '#createComponentsWithDecorators'],
25+
id: 'ng2.costs.decorators',
26+
params: [{
27+
name: 'size', value: 200, scale: 'linear'
28+
}]
29+
}).then(done, done.fail);
30+
});
31+
});

‎modules/benchmarks/pubspec.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ transformers:
1818
- angular2:
1919
entry_points:
2020
- web/src/compiler/compiler_benchmark.dart
21+
- web/src/costs/index.dart
2122
- web/src/di/di_benchmark.dart
2223
- web/src/element_injector/element_injector_benchmark.dart
2324
- web/src/largetable/largetable_benchmark.dart

‎modules/benchmarks/src/costs/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!doctype html>
2+
<html>
3+
<body>
4+
5+
<h2>Params</h2>
6+
<form>
7+
Size:
8+
<input type="number" name="size" placeholder="size" value="100">
9+
<br>
10+
<button>Apply</button>
11+
</form>
12+
13+
<h2>Benchmarks</h2>
14+
<button id="reset">Reset</button>
15+
<table>
16+
<tr>
17+
<td>Baseline (plain components)</td>
18+
<td><button id="createPlainComponents">Run</button></td>
19+
</tr>
20+
<tr>
21+
<td>Cost of decorators</td>
22+
<td><button id="createComponentsWithDecorators">Run</button></td>
23+
</tr>
24+
</table>
25+
26+
<app></app>
27+
28+
$SCRIPTS$
29+
</body>
30+
</html>

‎modules/benchmarks/src/costs/index.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import {
2+
bootstrap,
3+
Component,
4+
Decorator,
5+
View
6+
} from 'angular2/angular2';
7+
import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
8+
import {List, ListWrapper} from 'angular2/src/facade/collection';
9+
import {reflector} from 'angular2/src/reflection/reflection';
10+
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
11+
import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
12+
import {If, For} from 'angular2/directives';
13+
14+
var testList = null;
15+
16+
export function main() {
17+
reflector.reflectionCapabilities = new ReflectionCapabilities();
18+
var size = getIntParameter('size');
19+
testList = ListWrapper.createFixedSize(size);
20+
21+
bootstrap(AppComponent).then((ref) => {
22+
var injector = ref.injector;
23+
var app:AppComponent = injector.get(AppComponent);
24+
var lifeCycle = injector.get(LifeCycle);
25+
26+
bindAction('#reset', function() {
27+
app.reset();
28+
lifeCycle.tick();
29+
});
30+
31+
// Baseline (plain components)
32+
bindAction('#createPlainComponents', function() {
33+
app.createPlainComponents();
34+
lifeCycle.tick();
35+
});
36+
37+
// Components with decorators
38+
bindAction('#createComponentsWithDecorators', function() {
39+
app.createComponentsWithDecorators();
40+
lifeCycle.tick();
41+
});
42+
});
43+
}
44+
45+
@Component({selector: 'app'})
46+
@View({
47+
directives: [If, For, DummyComponent, DummyDecorator],
48+
template: `
49+
<div *if="testingPlainComponents">
50+
<dummy *for="#i of list"></dummy>
51+
</div>
52+
53+
<div *if="testingWithDecorators">
54+
<dummy dummy-decorator *for="#i of list"></dummy>
55+
</div>
56+
`
57+
})
58+
class AppComponent {
59+
list:List;
60+
testingPlainComponents:boolean;
61+
testingWithDecorators:boolean;
62+
63+
constructor() {
64+
this.reset();
65+
}
66+
67+
reset():void {
68+
this.list = [];
69+
this.testingPlainComponents = false;
70+
this.testingWithDecorators = false;
71+
}
72+
73+
createPlainComponents():void {
74+
this.list = testList;
75+
this.testingPlainComponents = true;
76+
}
77+
78+
createComponentsWithDecorators():void {
79+
this.list = testList;
80+
this.testingWithDecorators = true;
81+
}
82+
}
83+
84+
@Component({selector: 'dummy'})
85+
@View({template: `<div></div>`})
86+
class DummyComponent {}
87+
88+
@Decorator({selector: '[dummy-decorator]'})
89+
class DummyDecorator {}

‎modules/benchmarks/src/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@
2626
<li>
2727
<a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
2828
</li>
29+
<li>
30+
<a href="costs/index.html">Benchmarks measuring costs of things</a>
31+
</li>
2932
</ul>
3033
</body>
3134
</html>

0 commit comments

Comments
 (0)