perf(benchmarks): benchmark measuring cost of decorators (fixes #1479)

This commit is contained in:
Yegor Jbanov 2015-04-26 11:35:25 -07:00
parent 6dece68bb8
commit 9fc9d53566
6 changed files with 155 additions and 1 deletions

View File

@ -102,7 +102,7 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
nodeValue(node:Node):string { nodeValue(node:Node):string {
return node.nodeValue; return node.nodeValue;
} }
type(node:string) { type(node:Node) {
return node.type; return node.type;
} }
content(node:HTMLElement):Node { content(node:HTMLElement):Node {

View File

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

View File

@ -18,6 +18,7 @@ transformers:
- angular2: - angular2:
entry_points: entry_points:
- web/src/compiler/compiler_benchmark.dart - web/src/compiler/compiler_benchmark.dart
- web/src/costs/index.dart
- web/src/di/di_benchmark.dart - web/src/di/di_benchmark.dart
- web/src/element_injector/element_injector_benchmark.dart - web/src/element_injector/element_injector_benchmark.dart
- web/src/largetable/largetable_benchmark.dart - web/src/largetable/largetable_benchmark.dart

View File

@ -0,0 +1,30 @@
<!doctype html>
<html>
<body>
<h2>Params</h2>
<form>
Size:
<input type="number" name="size" placeholder="size" value="100">
<br>
<button>Apply</button>
</form>
<h2>Benchmarks</h2>
<button id="reset">Reset</button>
<table>
<tr>
<td>Baseline (plain components)</td>
<td><button id="createPlainComponents">Run</button></td>
</tr>
<tr>
<td>Cost of decorators</td>
<td><button id="createComponentsWithDecorators">Run</button></td>
</tr>
</table>
<app></app>
$SCRIPTS$
</body>
</html>

View File

@ -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: `
<div *if="testingPlainComponents">
<dummy *for="#i of list"></dummy>
</div>
<div *if="testingWithDecorators">
<dummy dummy-decorator *for="#i of list"></dummy>
</div>
`
})
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: `<div></div>`})
class DummyComponent {}
@Decorator({selector: '[dummy-decorator]'})
class DummyDecorator {}

View File

@ -26,6 +26,9 @@
<li> <li>
<a href="largetable/largetable_benchmark.html">Largetable benchmark</a> <a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
</li> </li>
<li>
<a href="costs/index.html">Benchmarks measuring costs of things</a>
</li>
</ul> </ul>
</body> </body>
</html> </html>