perf(benchmarks): benchmark measuring cost of decorators (fixes #1479)
This commit is contained in:
Yegor Jbanov
parent
6dece68bb8
commit
9fc9d53566
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 {}
|
||||
|
|
@ -26,6 +26,9 @@
|
|||
<li>
|
||||
<a href="largetable/largetable_benchmark.html">Largetable benchmark</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="costs/index.html">Benchmarks measuring costs of things</a>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue