feat(benchmarks): add targetable benchmarks back
This commit is contained in:
Tobias Bosch
committed by
Martin Probst
Martin Probst
parent
d26a827494
commit
b4363bc8af
@ -1,123 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="icon" href="data:;base64,=">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Params</h2>
|
||||
|
||||
<div>
|
||||
<form>
|
||||
<div>
|
||||
Use Viewcache:
|
||||
<label>
|
||||
Yes<input type="radio" name="viewcache" placeholder="use viewcache" value="true" checked="checked">
|
||||
</label>
|
||||
<label>
|
||||
No<input type="radio" name="viewcache" placeholder="use viewcache" value="false">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
rows:
|
||||
<input type="number" name="rows" value="100">
|
||||
columns:
|
||||
<input type="number" name="columns" value="20">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
baseline (to be used in conjuction with Baseline:createDom & Baseline:destroyDom buttons):
|
||||
<input type="radio"
|
||||
name="benchmarkType"
|
||||
value="baseline"
|
||||
id="baseline">
|
||||
</div>
|
||||
<div>
|
||||
ngBind (not implemented):
|
||||
<input type="radio"
|
||||
name="benchmarkType"
|
||||
value="ngBind"
|
||||
id="ngBind">
|
||||
</div>
|
||||
<div>
|
||||
ngBindOnce (not implemented):
|
||||
<input type="radio"
|
||||
name="benchmarkType"
|
||||
value="ngBindOnce"
|
||||
id="ngBindOnce">
|
||||
</div>
|
||||
<div>
|
||||
interpolation:
|
||||
<input type="radio"
|
||||
name="benchmarkType"
|
||||
value="interpolation"
|
||||
id="interpolation"
|
||||
checked>
|
||||
</div>
|
||||
<div>
|
||||
attribute interpolation:
|
||||
<input type="radio"
|
||||
name="benchmarkType"
|
||||
value="interpolationAttr"
|
||||
id="interpolationAttr">
|
||||
</div>
|
||||
<div>
|
||||
ngBind + fnInvocation (not implemented):
|
||||
<input type="radio"
|
||||
name="benchmarkType"
|
||||
value="ngBindFn"
|
||||
id="ngBindFn">
|
||||
</div>
|
||||
<div>
|
||||
interpolation + fnInvocation:
|
||||
<input type="radio"
|
||||
name="benchmarkType"
|
||||
value="interpolationFn"
|
||||
id="interpolationFn">
|
||||
</div>
|
||||
<div>
|
||||
ngBind + filter (not implemented):
|
||||
<input type="radio"
|
||||
name="benchmarkType"
|
||||
value="ngBindFilter"
|
||||
id="ngBindFilter">
|
||||
</div>
|
||||
<div>
|
||||
interpolation + filter (not implemented):
|
||||
<input type="radio"
|
||||
name="benchmarkType"
|
||||
value="interpolationFilter"
|
||||
id="interpolationFilter">
|
||||
</div>
|
||||
<button>Apply</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2>Angular2 largetable benchmark</h2>
|
||||
<p>
|
||||
<button id="ng2DestroyDom">destroyDom</button>
|
||||
<button id="ng2CreateDom">createDom</button>
|
||||
<button id="ng2UpdateDomProfile">profile updateDom</button>
|
||||
<button id="ng2CreateDomProfile">profile createDom</button>
|
||||
</p>
|
||||
|
||||
<h2>Baseline largetable benchmark</h2>
|
||||
<p>
|
||||
<button id="baselineDestroyDom">destroyDom</button>
|
||||
<button id="baselineCreateDom">createDom</button>
|
||||
<button id="baselineUpdateDomProfile">profile updateDom</button>
|
||||
<button id="baselineCreateDomProfile">profile createDom</button>
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<app></app>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<baseline></baseline>
|
||||
</div>
|
||||
|
||||
$SCRIPTS$
|
||||
</body>
|
||||
</html>
|
||||
@ -1,260 +0,0 @@
|
||||
import {NgFor, NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
|
||||
import {Component} from '@angular/core';
|
||||
import {ApplicationRef} from '@angular/core/src/application_ref';
|
||||
import {Inject} from '@angular/core/src/di/decorators';
|
||||
import {reflector} from '@angular/core/src/reflection/reflection';
|
||||
import {document, gc, window} from '@angular/facade/src/browser';
|
||||
import {ListWrapper} from '@angular/facade/src/collection';
|
||||
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 {bindAction, getIntParameter, getStringParameter, windowProfile, windowProfileEnd} from '@angular/testing/src/benchmark_util';
|
||||
|
||||
export const BENCHMARK_TYPE = 'LargetableComponent.benchmarkType';
|
||||
export const LARGETABLE_ROWS = 'LargetableComponent.rows';
|
||||
export const LARGETABLE_COLS = 'LargetableComponent.cols';
|
||||
|
||||
function _createBindings() {
|
||||
return [
|
||||
{provide: BENCHMARK_TYPE, useValue: getStringParameter('benchmarkType')},
|
||||
{provide: LARGETABLE_ROWS, useValue: getIntParameter('rows')},
|
||||
{provide: LARGETABLE_COLS, useValue: getIntParameter('columns')},
|
||||
];
|
||||
}
|
||||
|
||||
var BASELINE_LARGETABLE_TEMPLATE;
|
||||
|
||||
function setupReflector() {
|
||||
// TODO(kegluneq): Generate these.
|
||||
reflector.registerGetters({
|
||||
'benchmarktype': (o) => o.benchmarktype,
|
||||
'switch': (o) => null,
|
||||
'switchCase': (o) => o.switchCase
|
||||
});
|
||||
reflector.registerSetters({
|
||||
'benchmarktype': (o, v) => o.benchmarktype = v,
|
||||
'switch': (o, v) => null,
|
||||
'switchCase': (o, v) => o.switchCase = v
|
||||
});
|
||||
}
|
||||
|
||||
export function main() {
|
||||
BrowserDomAdapter.makeCurrent();
|
||||
var totalRows = getIntParameter('rows');
|
||||
var totalColumns = getIntParameter('columns');
|
||||
BASELINE_LARGETABLE_TEMPLATE = DOM.createTemplate('<table></table>');
|
||||
|
||||
var app;
|
||||
var appRef;
|
||||
var baselineRootLargetableComponent;
|
||||
|
||||
function ng2DestroyDom() {
|
||||
// TODO: We need an initial value as otherwise the getter for data.value will fail
|
||||
// --> this should be already caught in change detection!
|
||||
app.data = null;
|
||||
app.benchmarkType = 'none';
|
||||
appRef.tick();
|
||||
}
|
||||
|
||||
function profile(create, destroy, name) {
|
||||
return function() {
|
||||
windowProfile(name + ' w GC');
|
||||
var duration = 0;
|
||||
var count = 0;
|
||||
while (count++ < 150) {
|
||||
gc();
|
||||
var start = window.performance.now();
|
||||
create();
|
||||
duration += window.performance.now() - start;
|
||||
destroy();
|
||||
}
|
||||
windowProfileEnd(name + ' w GC');
|
||||
window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
|
||||
|
||||
windowProfile(name + ' w/o GC');
|
||||
duration = 0;
|
||||
count = 0;
|
||||
while (count++ < 150) {
|
||||
var start = window.performance.now();
|
||||
create();
|
||||
duration += window.performance.now() - start;
|
||||
destroy();
|
||||
}
|
||||
windowProfileEnd(name + ' w/o GC');
|
||||
window.console.log(`Iterations: ${count}; time: ${duration / count} ms / iteration`);
|
||||
};
|
||||
}
|
||||
|
||||
function ng2CreateDom() {
|
||||
var data = ListWrapper.createFixedSize(totalRows);
|
||||
|
||||
for (var i = 0; i < totalRows; i++) {
|
||||
data[i] = ListWrapper.createFixedSize(totalColumns);
|
||||
for (var j = 0; j < totalColumns; j++) {
|
||||
data[i][j] = new CellData(i, j);
|
||||
}
|
||||
}
|
||||
app.data = data;
|
||||
app.benchmarkType = getStringParameter('benchmarkType');
|
||||
appRef.tick();
|
||||
}
|
||||
|
||||
function noop() {}
|
||||
|
||||
function initNg2() {
|
||||
bootstrap(AppComponent, _createBindings()).then((ref) => {
|
||||
var injector = ref.injector;
|
||||
app = ref.instance;
|
||||
appRef = injector.get(ApplicationRef);
|
||||
bindAction('#ng2DestroyDom', ng2DestroyDom);
|
||||
bindAction('#ng2CreateDom', ng2CreateDom);
|
||||
bindAction('#ng2UpdateDomProfile', profile(ng2CreateDom, noop, 'ng2-update'));
|
||||
bindAction('#ng2CreateDomProfile', profile(ng2CreateDom, ng2DestroyDom, 'ng2-create'));
|
||||
});
|
||||
setupReflector();
|
||||
}
|
||||
|
||||
function baselineDestroyDom() { baselineRootLargetableComponent.update(buildTable(0, 0)); }
|
||||
|
||||
function baselineCreateDom() {
|
||||
baselineRootLargetableComponent.update(buildTable(totalRows, totalColumns));
|
||||
}
|
||||
|
||||
function initBaseline() {
|
||||
baselineRootLargetableComponent = new BaseLineLargetableComponent(
|
||||
DOM.querySelector(document, 'baseline'), getStringParameter('benchmarkType'),
|
||||
getIntParameter('rows'), getIntParameter('columns'));
|
||||
|
||||
bindAction('#baselineDestroyDom', baselineDestroyDom);
|
||||
bindAction('#baselineCreateDom', baselineCreateDom);
|
||||
|
||||
bindAction('#baselineUpdateDomProfile', profile(baselineCreateDom, noop, 'baseline-update'));
|
||||
bindAction(
|
||||
'#baselineCreateDomProfile',
|
||||
profile(baselineCreateDom, baselineDestroyDom, 'baseline-create'));
|
||||
}
|
||||
|
||||
initNg2();
|
||||
initBaseline();
|
||||
}
|
||||
|
||||
function buildTable(rows, columns) {
|
||||
var tbody = DOM.createElement('tbody');
|
||||
var template = DOM.createElement('span');
|
||||
var i, j, row, cell;
|
||||
DOM.appendChild(template, DOM.createElement('span'));
|
||||
DOM.appendChild(template, DOM.createTextNode(':'));
|
||||
DOM.appendChild(template, DOM.createElement('span'));
|
||||
DOM.appendChild(template, DOM.createTextNode('|'));
|
||||
|
||||
for (i = 0; i < rows; i++) {
|
||||
row = DOM.createElement('div');
|
||||
DOM.appendChild(tbody, row);
|
||||
for (j = 0; j < columns; j++) {
|
||||
cell = DOM.clone(template);
|
||||
DOM.appendChild(row, cell);
|
||||
DOM.setText(cell.childNodes[0], i.toString());
|
||||
DOM.setText(cell.childNodes[2], j.toString());
|
||||
}
|
||||
}
|
||||
|
||||
return tbody;
|
||||
}
|
||||
|
||||
class BaseLineLargetableComponent {
|
||||
element;
|
||||
table;
|
||||
benchmarkType: string;
|
||||
rows: number;
|
||||
columns: number;
|
||||
constructor(element, benchmarkType, rows: number, columns: number) {
|
||||
this.element = element;
|
||||
this.benchmarkType = benchmarkType;
|
||||
this.rows = rows;
|
||||
this.columns = columns;
|
||||
this.table = DOM.clone(BASELINE_LARGETABLE_TEMPLATE.content.firstChild);
|
||||
var shadowRoot = DOM.createShadowRoot(this.element);
|
||||
DOM.appendChild(shadowRoot, this.table);
|
||||
}
|
||||
update(tbody) {
|
||||
var oldBody = DOM.querySelector(this.table, 'tbody');
|
||||
if (oldBody != null) {
|
||||
DOM.replaceChild(this.table, tbody, oldBody);
|
||||
} else {
|
||||
DOM.appendChild(this.table, tbody);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class CellData {
|
||||
i: number;
|
||||
j: number;
|
||||
constructor(i, j) {
|
||||
this.i = i;
|
||||
this.j = j;
|
||||
}
|
||||
|
||||
jFn() { return this.j; }
|
||||
|
||||
iFn() { return this.i; }
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'largetable',
|
||||
inputs: ['data', 'benchmarkType'],
|
||||
directives: [NgFor, NgSwitch, NgSwitchCase, NgSwitchDefault],
|
||||
template: `
|
||||
<table [ngSwitch]="benchmarkType">
|
||||
<tbody template="ngSwitchCase 'interpolation'">
|
||||
<tr template="ngFor let row of data">
|
||||
<td template="ngFor let column of row">
|
||||
{{column.i}}:{{column.j}}|
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody template="ngSwitchCase 'interpolationAttr'">
|
||||
<tr template="ngFor let row of data">
|
||||
<td template="ngFor let column of row" attr.i="{{column.i}}" attr.j="{{column.j}}">
|
||||
i,j attrs
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody template="ngSwitchCase 'interpolationFn'">
|
||||
<tr template="ngFor let row of data">
|
||||
<td template="ngFor let column of row">
|
||||
{{column.iFn()}}:{{column.jFn()}}|
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody template="ngSwitchDefault">
|
||||
<tr>
|
||||
<td>
|
||||
<em>{{benchmarkType}} not yet implemented</em>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`
|
||||
})
|
||||
class LargetableComponent {
|
||||
data;
|
||||
benchmarkType: string;
|
||||
rows: number;
|
||||
columns: number;
|
||||
constructor(
|
||||
@Inject(BENCHMARK_TYPE) benchmarkType, @Inject(LARGETABLE_ROWS) rows,
|
||||
@Inject(LARGETABLE_COLS) columns) {
|
||||
this.benchmarkType = benchmarkType;
|
||||
this.rows = rows;
|
||||
this.columns = columns;
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
directives: [LargetableComponent],
|
||||
template: `<largetable [data]='data' [benchmarkType]='benchmarkType'></largetable>`
|
||||
})
|
||||
class AppComponent {
|
||||
data;
|
||||
benchmarkType: string;
|
||||
}
|
||||
Reference in New Issue
Block a user