honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2015-05-12 11:03:14 -07:00 committed by Misko Hevery
parent d9ceb42bfe
commit 534cbb4bf5
2 changed files with 85 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
modules/benchmarks/src/compiler/compiler_benchmark.html
View File

@ -15,38 +15,6 @@
<button id="compileWithBindings">CompileWithBindings</button> <button id="compileWithBindings">CompileWithBindings</button>
<button id="compileNoBindings">CompileNoBindings</button> <button id="compileNoBindings">CompileNoBindings</button>
</p> </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$ $SCRIPTS$
</body> </body>

146
modules/benchmarks/src/compiler/compiler_benchmark.js
View File

@ -1,7 +1,7 @@
import {DOM} from 'angular2/src/dom/dom_adapter';
import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter'; import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
import {Type} from 'angular2/src/facade/lang'; import {PromiseWrapper} from 'angular2/src/facade/async';
import {document} from 'angular2/src/facade/browser'; 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 {NativeShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/native_shadow_dom_strategy';
import {Parser, Lexer, DynamicChangeDetection} from 'angular2/change_detection'; 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 {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
import * as rc from 'angular2/src/render/dom/compiler/compiler'; 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() { export function main() {
BrowserDomAdapter.makeCurrent(); BrowserDomAdapter.makeCurrent();
var count = getIntParameter('elements'); var count = getIntParameter('elements');
setupReflector(); reflector.reflectionCapabilities = new ReflectionCapabilities();
var reader = new DirectiveResolver(); var reader = new DirectiveResolver();
var cache = new CompilerCache(); var cache = new CompilerCache();
var templateResolver = new FakeTemplateResolver(); var templateResolver = new MultipleTemplateResolver(
count, [BenchmarkComponentNoBindings, BenchmarkComponentWithBindings]);
var urlResolver = new UrlResolver(); var urlResolver = new UrlResolver();
var styleUrlResolver = new StyleUrlResolver(urlResolver); var styleUrlResolver = new StyleUrlResolver(urlResolver);
var shadowDomStrategy = new NativeShadowDomStrategy(styleUrlResolver); var shadowDomStrategy = new NativeShadowDomStrategy(styleUrlResolver);
@ -75,33 +49,34 @@ export function main() {
renderCompiler, renderCompiler,
new ProtoViewFactory(new DynamicChangeDetection(null)) 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() { function compileNoBindings() {
templateResolver.setTemplateHtml(templateNoBindings);
cache.clear(); cache.clear();
compiler.compile(BenchmarkComponent); return compiler.compile(BenchmarkComponentNoBindings);
} }
function compileWithBindings() { function compileWithBindings() {
templateResolver.setTemplateHtml(templateWithBindings);
cache.clear(); cache.clear();
compiler.compile(BenchmarkComponent); return compiler.compile(BenchmarkComponentWithBindings);
} }
bindAction('#compileNoBindings', compileNoBindings); bindAction('#compileNoBindings',
bindAction('#compileWithBindings', compileWithBindings); measureWrapper(compileNoBindings, 'No Bindings'));
} bindAction('#compileWithBindings',
measureWrapper(compileWithBindings, 'With Bindings'));
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;
} }
@Directive({ @Directive({
@ -152,24 +127,71 @@ class Dir4 {
constructor(dir3:Dir3) {} constructor(dir3:Dir3) {}
} }
@Component() class MultipleTemplateResolver extends TemplateResolver {
class BenchmarkComponent {} _multiple: num;
_cache: Map;
class FakeTemplateResolver extends TemplateResolver { constructor(multiple: num, components: List) {
_template: View;
constructor() {
super(); super();
this._multiple = multiple;
this._cache = MapWrapper.create();
ListWrapper.forEach(components, (c) => this._warmUp(c));
} }
setTemplateHtml(html: string) { _warmUp(component: Type) {
this._template = new View({ var view = super.resolve(component);
template: html, var multiplier = ListWrapper.createFixedSize(this._multiple);
directives: [Dir0, Dir1, Dir2, Dir3, Dir4] for (var i = 0; i < this._multiple; ++i) {
}); multiplier[i] = view.template;
}
MapWrapper.set(this._cache, component, ListWrapper.join(multiplier, ''));
} }
resolve(component: Type): View { 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 {}