refactor(benchmarks): Update compile benchmarks
Update the compile benchmark to allow the Dart transformer to properly generate the getters, setters, & methods needed. This also improves the method of duplicating the source templates, further decreasing runtime from ~5s to ~2s.
This commit is contained in:
Tim Blasi
Misko Hevery
parent
d9ceb42bfe
commit
534cbb4bf5
|
|
@ -15,39 +15,7 @@
|
|||
<button id="compileWithBindings">CompileWithBindings</button>
|
||||
<button id="compileNoBindings">CompileNoBindings</button>
|
||||
</p>
|
||||
|
||||
<template id="templateNoBindings">
|
||||
<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
|
||||
<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
|
||||
<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
|
||||
<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
|
||||
<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="templateWithBindings">
|
||||
<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
|
||||
{{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
|
||||
<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
|
||||
{{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
|
||||
<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
|
||||
{{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
|
||||
<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
|
||||
{{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
|
||||
<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
|
||||
{{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
$SCRIPTS$
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
|
||||
import {Type} from 'angular2/src/facade/lang';
|
||||
import {document} from 'angular2/src/facade/browser';
|
||||
import {PromiseWrapper} from 'angular2/src/facade/async';
|
||||
import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
|
||||
import {DateWrapper, Type, print} from 'angular2/src/facade/lang';
|
||||
import {NativeShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy';
|
||||
|
||||
import {Parser, Lexer, DynamicChangeDetection} from 'angular2/change_detection';
|
||||
|
|
@ -25,41 +25,15 @@ import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'
|
|||
import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
|
||||
import * as rc from 'angular2/src/render/dom/compiler/compiler';
|
||||
|
||||
function setupReflector() {
|
||||
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
||||
|
||||
reflector.registerGetters({
|
||||
"inter0": (a) => a.inter0, "inter1": (a) => a.inter1,
|
||||
"inter2": (a) => a.inter2, "inter3": (a) => a.inter3, "inter4": (a) => a.inter4,
|
||||
|
||||
"value0": (a) => a.value0, "value1": (a) => a.value1,
|
||||
"value2": (a) => a.value2, "value3": (a) => a.value3, "value4": (a) => a.value4,
|
||||
|
||||
"prop" : (a) => a.prop
|
||||
});
|
||||
|
||||
reflector.registerSetters({
|
||||
"inter0": (a,v) => a.inter0 = v, "inter1": (a,v) => a.inter1 = v,
|
||||
"inter2": (a,v) => a.inter2 = v, "inter3": (a,v) => a.inter3 = v, "inter4": (a,v) => a.inter4 = v,
|
||||
|
||||
"value0": (a,v) => a.value0 = v, "value1": (a,v) => a.value1 = v,
|
||||
"value2": (a,v) => a.value2 = v, "value3": (a,v) => a.value3 = v, "value4": (a,v) => a.value4 = v,
|
||||
|
||||
"attr0": (a,v) => a.attr0 = v, "attr1": (a,v) => a.attr1 = v,
|
||||
"attr2": (a,v) => a.attr2 = v, "attr3": (a,v) => a.attr3 = v, "attr4": (a,v) => a.attr4 = v,
|
||||
|
||||
"prop": (a,v) => a.prop = v
|
||||
});
|
||||
}
|
||||
|
||||
export function main() {
|
||||
BrowserDomAdapter.makeCurrent();
|
||||
var count = getIntParameter('elements');
|
||||
|
||||
setupReflector();
|
||||
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
||||
var reader = new DirectiveResolver();
|
||||
var cache = new CompilerCache();
|
||||
var templateResolver = new FakeTemplateResolver();
|
||||
var templateResolver = new MultipleTemplateResolver(
|
||||
count, [BenchmarkComponentNoBindings, BenchmarkComponentWithBindings]);
|
||||
var urlResolver = new UrlResolver();
|
||||
var styleUrlResolver = new StyleUrlResolver(urlResolver);
|
||||
var shadowDomStrategy = new NativeShadowDomStrategy(styleUrlResolver);
|
||||
|
|
@ -75,33 +49,34 @@ export function main() {
|
|||
renderCompiler,
|
||||
new ProtoViewFactory(new DynamicChangeDetection(null))
|
||||
);
|
||||
var templateNoBindings = createTemplateHtml('templateNoBindings', count);
|
||||
var templateWithBindings = createTemplateHtml('templateWithBindings', count);
|
||||
|
||||
function measureWrapper(func, desc) {
|
||||
return function() {
|
||||
var begin = DateWrapper.now();
|
||||
print(`[${desc}] Begin...`);
|
||||
var onSuccess = function(_) {
|
||||
var elapsedMs = DateWrapper.toMillis(
|
||||
DateWrapper.now()) - DateWrapper.toMillis(begin);
|
||||
print(`[${desc}] ...done, took ${elapsedMs} ms`);
|
||||
};
|
||||
PromiseWrapper.then(func(), onSuccess, null);
|
||||
};
|
||||
}
|
||||
|
||||
function compileNoBindings() {
|
||||
templateResolver.setTemplateHtml(templateNoBindings);
|
||||
cache.clear();
|
||||
compiler.compile(BenchmarkComponent);
|
||||
return compiler.compile(BenchmarkComponentNoBindings);
|
||||
}
|
||||
|
||||
function compileWithBindings() {
|
||||
templateResolver.setTemplateHtml(templateWithBindings);
|
||||
cache.clear();
|
||||
compiler.compile(BenchmarkComponent);
|
||||
return compiler.compile(BenchmarkComponentWithBindings);
|
||||
}
|
||||
|
||||
bindAction('#compileNoBindings', compileNoBindings);
|
||||
bindAction('#compileWithBindings', compileWithBindings);
|
||||
}
|
||||
|
||||
function createTemplateHtml(templateId, repeatCount) {
|
||||
var template = DOM.querySelectorAll(document, `#${templateId}`)[0];
|
||||
var content = DOM.getInnerHTML(template);
|
||||
var result = '';
|
||||
for (var i=0; i<repeatCount; i++) {
|
||||
result += content;
|
||||
}
|
||||
return result;
|
||||
bindAction('#compileNoBindings',
|
||||
measureWrapper(compileNoBindings, 'No Bindings'));
|
||||
bindAction('#compileWithBindings',
|
||||
measureWrapper(compileWithBindings, 'With Bindings'));
|
||||
}
|
||||
|
||||
@Directive({
|
||||
|
|
@ -152,24 +127,71 @@ class Dir4 {
|
|||
constructor(dir3:Dir3) {}
|
||||
}
|
||||
|
||||
@Component()
|
||||
class BenchmarkComponent {}
|
||||
class MultipleTemplateResolver extends TemplateResolver {
|
||||
_multiple: num;
|
||||
_cache: Map;
|
||||
|
||||
class FakeTemplateResolver extends TemplateResolver {
|
||||
_template: View;
|
||||
|
||||
constructor() {
|
||||
constructor(multiple: num, components: List) {
|
||||
super();
|
||||
this._multiple = multiple;
|
||||
this._cache = MapWrapper.create();
|
||||
ListWrapper.forEach(components, (c) => this._warmUp(c));
|
||||
}
|
||||
|
||||
setTemplateHtml(html: string) {
|
||||
this._template = new View({
|
||||
template: html,
|
||||
directives: [Dir0, Dir1, Dir2, Dir3, Dir4]
|
||||
});
|
||||
_warmUp(component: Type) {
|
||||
var view = super.resolve(component);
|
||||
var multiplier = ListWrapper.createFixedSize(this._multiple);
|
||||
for (var i = 0; i < this._multiple; ++i) {
|
||||
multiplier[i] = view.template;
|
||||
}
|
||||
MapWrapper.set(this._cache, component, ListWrapper.join(multiplier, ''));
|
||||
}
|
||||
|
||||
resolve(component: Type): View {
|
||||
return this._template;
|
||||
var view = super.resolve(component);
|
||||
var myView = new View({
|
||||
template: MapWrapper.get(this._cache, component),
|
||||
directives: view.directives
|
||||
});
|
||||
return myView;
|
||||
}
|
||||
}
|
||||
|
||||
@Component()
|
||||
@View({
|
||||
directives: [Dir0, Dir1, Dir2, Dir3, Dir4],
|
||||
template: `
|
||||
<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
|
||||
<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
|
||||
<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
|
||||
<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
|
||||
<div class="class0 class1 class2 class3 class4 " nodir0="" attr0="value0" nodir1="" attr1="value1" nodir2="" attr2="value2" nodir3="" attr3="value3" nodir4="" attr4="value4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
class BenchmarkComponentNoBindings {}
|
||||
|
||||
@Component()
|
||||
@View({
|
||||
directives: [Dir0, Dir1, Dir2, Dir3, Dir4],
|
||||
template: `
|
||||
<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
|
||||
{{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
|
||||
<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
|
||||
{{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
|
||||
<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
|
||||
{{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
|
||||
<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
|
||||
{{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
|
||||
<div class="class0 class1 class2 class3 class4 " dir0="" [attr0]="value0" dir1="" [attr1]="value1" dir2="" [attr2]="value2" dir3="" [attr3]="value3" dir4="" [attr4]="value4">
|
||||
{{inter0}}{{inter1}}{{inter2}}{{inter3}}{{inter4}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
class BenchmarkComponentWithBindings {}
|
||||
|
|
|
|||
Loading…
Reference in New Issue