refactor(benchmarks): make tree benchmark work again
This commit is contained in:
Tobias Bosch
committed by
Victor Berchet
Victor Berchet
parent
5ff14de1f3
commit
61002733bc
23
modules/benchmarks/src/old/compiler/compiler_benchmark.html
Normal file
23
modules/benchmarks/src/old/compiler/compiler_benchmark.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<body>
|
||||
|
||||
<h2>Params</h2>
|
||||
<form>
|
||||
Elements:
|
||||
<input type="number" name="elements" placeholder="elements" value="50">
|
||||
<br>
|
||||
<button>Apply</button>
|
||||
</form>
|
||||
|
||||
<h2>Actions</h2>
|
||||
<p>
|
||||
<button id="compileWithBindings">CompileWithBindings</button>
|
||||
<button id="compileNoBindings">CompileNoBindings</button>
|
||||
</p>
|
||||
|
||||
<app></app>
|
||||
$SCRIPTS$
|
||||
|
||||
</body>
|
||||
</html>
|
||||
184
modules/benchmarks/src/old/compiler/compiler_benchmark.ts
Normal file
184
modules/benchmarks/src/old/compiler/compiler_benchmark.ts
Normal file
@ -0,0 +1,184 @@
|
||||
import {bootstrap} from '@angular/platform-browser';
|
||||
import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
|
||||
import {DOM} from '@angular/platform-browser/src/dom/dom_adapter';
|
||||
import {PromiseWrapper} from '@angular/facade/src/async';
|
||||
import {ListWrapper, Map, MapWrapper} from '@angular/facade/src/collection';
|
||||
import {DateWrapper, Type, print, isPresent} from '@angular/facade/src/lang';
|
||||
|
||||
import {
|
||||
ComponentResolver,
|
||||
Component,
|
||||
Directive,
|
||||
ViewContainerRef,
|
||||
} from '@angular/core';
|
||||
|
||||
import {ViewMetadata} from '@angular/core/src/metadata/view';
|
||||
|
||||
import {CompilerConfig, DirectiveResolver} from '@angular/compiler';
|
||||
|
||||
import {getIntParameter, bindAction} from '@angular/testing/src/benchmark_util';
|
||||
|
||||
function _createBindings(): any[] {
|
||||
var multiplyTemplatesBy = getIntParameter('elements');
|
||||
return [
|
||||
{
|
||||
provide: DirectiveResolver,
|
||||
useFactory: () => new MultiplyDirectiveResolver(
|
||||
multiplyTemplatesBy,
|
||||
[BenchmarkComponentNoBindings, BenchmarkComponentWithBindings]),
|
||||
deps: []
|
||||
},
|
||||
// Use interpretative mode as Dart does not support JIT and
|
||||
// we want to be able to compare the numbers between JS and Dart
|
||||
{provide: CompilerConfig, useValue: new CompilerConfig({genDebugInfo: false, useJit: false, logBindingUpdate: false})}
|
||||
];
|
||||
}
|
||||
|
||||
export function main() {
|
||||
BrowserDomAdapter.makeCurrent();
|
||||
bootstrap(CompilerAppComponent, _createBindings())
|
||||
.then((ref) => {
|
||||
var app = ref.instance;
|
||||
bindAction('#compileNoBindings',
|
||||
measureWrapper(() => app.compileNoBindings(), 'No Bindings'));
|
||||
bindAction('#compileWithBindings',
|
||||
measureWrapper(() => app.compileWithBindings(), 'With Bindings'));
|
||||
});
|
||||
}
|
||||
|
||||
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`);
|
||||
};
|
||||
var onError = function(e) { DOM.logError(e); };
|
||||
PromiseWrapper.then(func(), onSuccess, onError);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
class MultiplyDirectiveResolver extends DirectiveResolver {
|
||||
_multiplyBy: number;
|
||||
_cache = new Map<Type, ViewMetadata>();
|
||||
|
||||
constructor(multiple: number, components: Type[]) {
|
||||
super();
|
||||
this._multiplyBy = multiple;
|
||||
components.forEach(c => this._fillCache(c));
|
||||
}
|
||||
|
||||
_fillCache(component: Type) {
|
||||
var view = super.resolve(component);
|
||||
var multipliedTemplates = ListWrapper.createFixedSize(this._multiplyBy);
|
||||
for (var i = 0; i < this._multiplyBy; ++i) {
|
||||
multipliedTemplates[i] = view.template;
|
||||
}
|
||||
this._cache.set(
|
||||
component,
|
||||
new ViewMetadata({template: multipliedTemplates.join(''), directives: view.directives}));
|
||||
}
|
||||
|
||||
resolve(component: Type): ViewMetadata {
|
||||
var result = this._cache.get(component);
|
||||
return isPresent(result) ? result : super.resolve(component);
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'app', directives: [], template: ``})
|
||||
class CompilerAppComponent {
|
||||
constructor(private _compiler: ComponentResolver) {}
|
||||
compileNoBindings() {
|
||||
this._compiler.clearCache();
|
||||
return this._compiler.resolveComponent(BenchmarkComponentNoBindings);
|
||||
}
|
||||
|
||||
compileWithBindings() {
|
||||
this._compiler.clearCache();
|
||||
return this._compiler.resolveComponent(BenchmarkComponentWithBindings);
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({selector: '[dir0]', inputs: ['prop: attr0']})
|
||||
class Dir0 {
|
||||
prop: any;
|
||||
}
|
||||
|
||||
@Directive({selector: '[dir1]', inputs: ['prop: attr1']})
|
||||
class Dir1 {
|
||||
prop: any;
|
||||
constructor(dir0: Dir0) {}
|
||||
}
|
||||
|
||||
@Directive({selector: '[dir2]', inputs: ['prop: attr2']})
|
||||
class Dir2 {
|
||||
prop: any;
|
||||
constructor(dir1: Dir1) {}
|
||||
}
|
||||
|
||||
@Directive({selector: '[dir3]', inputs: ['prop: attr3']})
|
||||
class Dir3 {
|
||||
prop: any;
|
||||
constructor(dir2: Dir2) {}
|
||||
}
|
||||
|
||||
@Directive({selector: '[dir4]', inputs: ['prop: attr4']})
|
||||
class Dir4 {
|
||||
prop: any;
|
||||
constructor(dir3: Dir3) {}
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'cmp-nobind',
|
||||
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({
|
||||
selector: 'cmp-withbind',
|
||||
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 {
|
||||
value0: any;
|
||||
value1: any;
|
||||
value2: any;
|
||||
value3: any;
|
||||
value4: any;
|
||||
|
||||
inter0: any;
|
||||
inter1: any;
|
||||
inter2: any;
|
||||
inter3: any;
|
||||
inter4: any;
|
||||
}
|
||||
23
modules/benchmarks/src/old/compiler/selector_benchmark.html
Normal file
23
modules/benchmarks/src/old/compiler/selector_benchmark.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<body>
|
||||
|
||||
<h2>Params</h2>
|
||||
<form>
|
||||
Selectors:
|
||||
<input type="number" name="selectors" placeholder="selectors" value="10000">
|
||||
<br>
|
||||
<button>Apply</button>
|
||||
</form>
|
||||
|
||||
<h2>Actions</h2>
|
||||
<p>
|
||||
<button id="parse">Selector.parse</button>
|
||||
<button id="addSelectable">Selector.addSelectable</button>
|
||||
<button id="match">Selector.match</button>
|
||||
</p>
|
||||
|
||||
$SCRIPTS$
|
||||
|
||||
</body>
|
||||
</html>
|
||||
82
modules/benchmarks/src/old/compiler/selector_benchmark.ts
Normal file
82
modules/benchmarks/src/old/compiler/selector_benchmark.ts
Normal file
@ -0,0 +1,82 @@
|
||||
import {SelectorMatcher} from '@angular/compiler/src/selector';
|
||||
import {CssSelector} from '@angular/compiler/src/selector';
|
||||
import {StringWrapper, Math} from '@angular/facade/lang';
|
||||
import {getIntParameter, bindAction} from '@angular/testing/src/benchmark_util';
|
||||
import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
|
||||
|
||||
export function main() {
|
||||
BrowserDomAdapter.makeCurrent();
|
||||
var count = getIntParameter('selectors');
|
||||
|
||||
var fixedMatcher;
|
||||
var fixedSelectorStrings = [];
|
||||
var fixedSelectors = [];
|
||||
for (var i = 0; i < count; i++) {
|
||||
fixedSelectorStrings.push(randomSelector());
|
||||
}
|
||||
for (var i = 0; i < count; i++) {
|
||||
fixedSelectors.push(CssSelector.parse(fixedSelectorStrings[i]));
|
||||
}
|
||||
fixedMatcher = new SelectorMatcher();
|
||||
for (var i = 0; i < count; i++) {
|
||||
fixedMatcher.addSelectables(fixedSelectors[i], i);
|
||||
}
|
||||
|
||||
function parse() {
|
||||
var result = [];
|
||||
for (var i = 0; i < count; i++) {
|
||||
result.push(CssSelector.parse(fixedSelectorStrings[i]));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function addSelectable() {
|
||||
var matcher = new SelectorMatcher();
|
||||
for (var i = 0; i < count; i++) {
|
||||
matcher.addSelectables(fixedSelectors[i], i);
|
||||
}
|
||||
return matcher;
|
||||
}
|
||||
|
||||
function match() {
|
||||
var matchCount = 0;
|
||||
for (var i = 0; i < count; i++) {
|
||||
fixedMatcher.match(fixedSelectors[i][0], (selector, selected) => { matchCount += selected; });
|
||||
}
|
||||
return matchCount;
|
||||
}
|
||||
|
||||
bindAction('#parse', parse);
|
||||
bindAction('#addSelectable', addSelectable);
|
||||
bindAction('#match', match);
|
||||
}
|
||||
|
||||
function randomSelector() {
|
||||
var res = randomStr(5);
|
||||
for (var i = 0; i < 3; i++) {
|
||||
res += '.' + randomStr(5);
|
||||
}
|
||||
for (var i = 0; i < 3; i++) {
|
||||
res += '[' + randomStr(3) + '=' + randomStr(6) + ']';
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function randomStr(len) {
|
||||
var s = '';
|
||||
while (s.length < len) {
|
||||
s += randomChar();
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
function randomChar() {
|
||||
var n = randomNum(62);
|
||||
if (n < 10) return n.toString(); // 1-10
|
||||
if (n < 36) return StringWrapper.fromCharCode(n + 55); // A-Z
|
||||
return StringWrapper.fromCharCode(n + 61); // a-z
|
||||
}
|
||||
|
||||
function randomNum(max) {
|
||||
return Math.floor(Math.random() * max);
|
||||
}
|
||||
Reference in New Issue
Block a user