feat(benchmarks): add targetable benchmarks back
This commit is contained in:
Tobias Bosch
Martin Probst
parent
d26a827494
commit
b4363bc8af
|
|
@ -0,0 +1,89 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright Google Inc. All Rights Reserved.
|
||||||
|
*
|
||||||
|
* Use of this source code is governed by an MIT-style license that can be
|
||||||
|
* found in the LICENSE file at https://angular.io/license
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {runBenchmark, verifyNoBrowserErrors} from 'e2e_util/perf_util';
|
||||||
|
|
||||||
|
interface Worker {
|
||||||
|
id: string;
|
||||||
|
prepare?(): void;
|
||||||
|
work(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CreateOnlyWorker: Worker = {
|
||||||
|
id: 'createOnly',
|
||||||
|
prepare: () => $('#destroyDom').click(),
|
||||||
|
work: () => $('#createDom').click()
|
||||||
|
};
|
||||||
|
|
||||||
|
const CreateAndDestroyWorker: Worker = {
|
||||||
|
id: 'createDestroy',
|
||||||
|
work: () => {
|
||||||
|
$('#createDom').click();
|
||||||
|
$('#destroyDom').click();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const UpdateWorker: Worker = {
|
||||||
|
id: 'update',
|
||||||
|
work: () => $('#createDom').click()
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('largetable benchmark perf', () => {
|
||||||
|
|
||||||
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
|
[CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => {
|
||||||
|
describe(worker.id, () => {
|
||||||
|
it('should run for ng2', (done) => {
|
||||||
|
runTableBenchmark({
|
||||||
|
id: `largeTable.ng2.${worker.id}`,
|
||||||
|
url: 'all/benchmarks/src/largetable/ng2/index.html',
|
||||||
|
worker: worker
|
||||||
|
}).then(done, done.fail);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should run for ng2 with ngSwitch', (done) => {
|
||||||
|
runTableBenchmark({
|
||||||
|
id: `largeTable.ng2_switch.${worker.id}`,
|
||||||
|
url: 'all/benchmarks/src/largetable/ng2_switch/index.html',
|
||||||
|
worker: worker
|
||||||
|
}).then(done, done.fail);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should run for the baseline', (done) => {
|
||||||
|
runTableBenchmark({
|
||||||
|
id: `largeTable.baseline.${worker.id}`,
|
||||||
|
url: 'all/benchmarks/src/largetable/baseline/index.html',
|
||||||
|
ignoreBrowserSynchronization: true,
|
||||||
|
worker: worker
|
||||||
|
}).then(done, done.fail);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should run for incremental-dom', (done) => {
|
||||||
|
runTableBenchmark({
|
||||||
|
id: `largeTable.incremental_dom.${worker.id}`,
|
||||||
|
url: 'all/benchmarks/src/largetable/incremental_dom/index.html',
|
||||||
|
ignoreBrowserSynchronization: true,
|
||||||
|
worker: worker
|
||||||
|
}).then(done, done.fail);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function runTableBenchmark(
|
||||||
|
config: {id: string, url: string, ignoreBrowserSynchronization?: boolean, worker: Worker}) {
|
||||||
|
return runBenchmark({
|
||||||
|
id: config.id,
|
||||||
|
url: config.url,
|
||||||
|
ignoreBrowserSynchronization: config.ignoreBrowserSynchronization,
|
||||||
|
params: [{name: 'cols', value: 40}, {name: 'rows', value: 200}],
|
||||||
|
prepare: config.worker.prepare,
|
||||||
|
work: config.worker.work
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright Google Inc. All Rights Reserved.
|
||||||
|
*
|
||||||
|
* Use of this source code is governed by an MIT-style license that can be
|
||||||
|
* found in the LICENSE file at https://angular.io/license
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {openBrowser, verifyNoBrowserErrors} from 'e2e_util/e2e_util';
|
||||||
|
|
||||||
|
describe('largetable benchmark spec', () => {
|
||||||
|
|
||||||
|
afterEach(verifyNoBrowserErrors);
|
||||||
|
|
||||||
|
it('should work for ng2', () => {
|
||||||
|
testTreeBenchmark({
|
||||||
|
url: 'all/benchmarks/src/largetable/ng2/index.html',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should work for ng2 switch', () => {
|
||||||
|
testTreeBenchmark({
|
||||||
|
url: 'all/benchmarks/src/largetable/ng2_switch/index.html',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should work for the baseline', () => {
|
||||||
|
testTreeBenchmark({
|
||||||
|
url: 'all/benchmarks/src/largetable/baseline/index.html',
|
||||||
|
ignoreBrowserSynchronization: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should work for the incremental-dom', () => {
|
||||||
|
testTreeBenchmark({
|
||||||
|
url: 'all/benchmarks/src/largetable/incremental_dom/index.html',
|
||||||
|
ignoreBrowserSynchronization: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function testTreeBenchmark(openConfig: {url: string, ignoreBrowserSynchronization?: boolean}) {
|
||||||
|
openBrowser({
|
||||||
|
url: openConfig.url,
|
||||||
|
ignoreBrowserSynchronization: openConfig.ignoreBrowserSynchronization,
|
||||||
|
params: [{name: 'cols', value: 5}, {name: 'rows', value: 5}],
|
||||||
|
});
|
||||||
|
$('#createDom').click();
|
||||||
|
expect($('#root').getText()).toContain('0/0');
|
||||||
|
$('#createDom').click();
|
||||||
|
expect($('#root').getText()).toContain('A/A');
|
||||||
|
$('#destroyDom').click();
|
||||||
|
expect($('#root').getText()).toEqual('');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Params</h2>
|
||||||
|
<form>
|
||||||
|
Cols:
|
||||||
|
<input type="number" name="cols" placeholder="cols" value="40">
|
||||||
|
<br>
|
||||||
|
Rows:
|
||||||
|
<input type="number" name="rows" placeholder="rows" value="200">
|
||||||
|
<br>
|
||||||
|
<button>Apply</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<h2>Baseline Largetable Benchmark</h2>
|
||||||
|
<p>
|
||||||
|
<button id="destroyDom">destroyDom</button>
|
||||||
|
<button id="createDom">createDom</button>
|
||||||
|
<button id="updateDomProfile">profile updateDom</button>
|
||||||
|
<button id="createDomProfile">profile createDom</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<largetable id="root"></largetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../bootstrap_plain.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import {bindAction, profile} from '../../util';
|
||||||
|
import {buildTable, emptyTable} from '../util';
|
||||||
|
import {TableComponent} from './table';
|
||||||
|
|
||||||
|
export function main() {
|
||||||
|
var table: TableComponent;
|
||||||
|
|
||||||
|
function destroyDom() { table.data = emptyTable; }
|
||||||
|
|
||||||
|
function createDom() { table.data = buildTable(); }
|
||||||
|
|
||||||
|
function noop() {}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
table = new TableComponent(document.querySelector('largetable'));
|
||||||
|
|
||||||
|
bindAction('#destroyDom', destroyDom);
|
||||||
|
bindAction('#createDom', createDom);
|
||||||
|
|
||||||
|
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
|
||||||
|
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
import {TableCell} from '../util';
|
||||||
|
|
||||||
|
export class TableComponent {
|
||||||
|
private _renderCells: any[][];
|
||||||
|
constructor(private _rootEl: any) {}
|
||||||
|
|
||||||
|
set data(data: TableCell[][]) {
|
||||||
|
if (data.length === 0) {
|
||||||
|
this._destroy();
|
||||||
|
} else if (this._renderCells) {
|
||||||
|
this._update(data);
|
||||||
|
} else {
|
||||||
|
this._create(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _destroy() {
|
||||||
|
while (this._rootEl.lastChild) {
|
||||||
|
this._rootEl.lastChild.remove();
|
||||||
|
}
|
||||||
|
this._renderCells = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _update(data: TableCell[][]) {
|
||||||
|
for (let r = 0; r < data.length; r++) {
|
||||||
|
const dataRow = data[r];
|
||||||
|
const renderRow = this._renderCells[r];
|
||||||
|
for (let c = 0; c < dataRow.length; c++) {
|
||||||
|
const dataCell = dataRow[c];
|
||||||
|
const renderCell = renderRow[c];
|
||||||
|
this._updateCell(renderCell, dataCell);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private _updateCell(renderCell: any, dataCell: TableCell) {
|
||||||
|
renderCell.textContent = dataCell.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _create(data: TableCell[][]) {
|
||||||
|
const table = document.createElement('table');
|
||||||
|
this._rootEl.appendChild(table);
|
||||||
|
const tbody = document.createElement('tbody');
|
||||||
|
table.appendChild(tbody);
|
||||||
|
this._renderCells = new Array(data.length);
|
||||||
|
for (let r = 0; r < data.length; r++) {
|
||||||
|
const dataRow = data[r];
|
||||||
|
const tr = document.createElement('tr');
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
const renderRow = new Array(dataRow.length);
|
||||||
|
this._renderCells[r] = renderRow;
|
||||||
|
for (let c = 0; c < dataRow.length; c++) {
|
||||||
|
const dataCell = dataRow[c];
|
||||||
|
const renderCell = document.createElement('td');
|
||||||
|
if (r % 2 === 0) {
|
||||||
|
renderCell.style.backgroundColor = 'grey';
|
||||||
|
}
|
||||||
|
tr.appendChild(renderCell);
|
||||||
|
renderRow[c] = renderCell;
|
||||||
|
this._updateCell(renderCell, dataCell);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Params</h2>
|
||||||
|
<form>
|
||||||
|
Cols:
|
||||||
|
<input type="number" name="cols" placeholder="cols" value="40">
|
||||||
|
<br>
|
||||||
|
Rows:
|
||||||
|
<input type="number" name="rows" placeholder="rows" value="200">
|
||||||
|
<br>
|
||||||
|
<button>Apply</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<h2>Incremental-Dom Largetable Benchmark</h2>
|
||||||
|
<p>
|
||||||
|
<button id="destroyDom">destroyDom</button>
|
||||||
|
<button id="createDom">createDom</button>
|
||||||
|
<button id="updateDomProfile">profile updateDom</button>
|
||||||
|
<button id="createDomProfile">profile createDom</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<largetable id="root"></largetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../bootstrap_plain.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import {bindAction, profile} from '../../util';
|
||||||
|
import {buildTable, emptyTable} from '../util';
|
||||||
|
import {TableComponent} from './table';
|
||||||
|
|
||||||
|
export function main() {
|
||||||
|
var table: TableComponent;
|
||||||
|
|
||||||
|
function destroyDom() { table.data = emptyTable; }
|
||||||
|
|
||||||
|
function createDom() { table.data = buildTable(); }
|
||||||
|
|
||||||
|
function noop() {}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
table = new TableComponent(document.querySelector('largetable'));
|
||||||
|
|
||||||
|
bindAction('#destroyDom', destroyDom);
|
||||||
|
bindAction('#createDom', createDom);
|
||||||
|
|
||||||
|
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
|
||||||
|
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import {TableCell} from '../util';
|
||||||
|
const {patch, elementOpen, elementClose, elementOpenStart, elementOpenEnd, attr, text} =
|
||||||
|
require('incremental-dom');
|
||||||
|
|
||||||
|
export class TableComponent {
|
||||||
|
constructor(private _rootEl: any) {}
|
||||||
|
|
||||||
|
set data(data: TableCell[][]) { patch(this._rootEl, () => this._render(data)); }
|
||||||
|
|
||||||
|
private _render(data: TableCell[][]) {
|
||||||
|
elementOpen('table');
|
||||||
|
elementOpen('tbody');
|
||||||
|
for (let r = 0; r < data.length; r++) {
|
||||||
|
elementOpen('tr');
|
||||||
|
const row = data[r];
|
||||||
|
for (let c = 0; c < row.length; c++) {
|
||||||
|
elementOpenStart('td');
|
||||||
|
if (r % 2 === 0) {
|
||||||
|
attr('style', 'background-color: grey');
|
||||||
|
}
|
||||||
|
elementOpenEnd('td');
|
||||||
|
text(row[c].value);
|
||||||
|
elementClose('td');
|
||||||
|
}
|
||||||
|
elementClose('tr');
|
||||||
|
}
|
||||||
|
elementClose('tbody');
|
||||||
|
elementClose('table');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Params</h2>
|
||||||
|
<form>
|
||||||
|
Cols:
|
||||||
|
<input type="number" name="cols" placeholder="cols" value="40">
|
||||||
|
<br>
|
||||||
|
Rows:
|
||||||
|
<input type="number" name="rows" placeholder="rows" value="200">
|
||||||
|
<br>
|
||||||
|
<button>Apply</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<h2>Ng2 Largetable Benchmark</h2>
|
||||||
|
<p>
|
||||||
|
<button id="destroyDom">destroyDom</button>
|
||||||
|
<button id="createDom">createDom</button>
|
||||||
|
<button id="updateDomProfile">profile updateDom</button>
|
||||||
|
<button id="createDomProfile">profile createDom</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<largetable id="root"></largetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../bootstrap_ng2.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import {ApplicationRef, NgModule, enableProdMode} from '@angular/core';
|
||||||
|
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
||||||
|
|
||||||
|
import {bindAction, profile} from '../../util';
|
||||||
|
import {buildTable, emptyTable} from '../util';
|
||||||
|
|
||||||
|
import {AppModule, TableComponent} from './table';
|
||||||
|
|
||||||
|
export function main() {
|
||||||
|
var table: TableComponent;
|
||||||
|
var appRef: ApplicationRef;
|
||||||
|
|
||||||
|
function destroyDom() {
|
||||||
|
table.data = emptyTable;
|
||||||
|
appRef.tick();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDom() {
|
||||||
|
table.data = buildTable();
|
||||||
|
appRef.tick();
|
||||||
|
}
|
||||||
|
|
||||||
|
function noop() {}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
enableProdMode();
|
||||||
|
platformBrowserDynamic().bootstrapModule(AppModule).then((ref) => {
|
||||||
|
var injector = ref.injector;
|
||||||
|
appRef = injector.get(ApplicationRef);
|
||||||
|
|
||||||
|
table = appRef.components[0].instance;
|
||||||
|
bindAction('#destroyDom', destroyDom);
|
||||||
|
bindAction('#createDom', createDom);
|
||||||
|
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
|
||||||
|
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import {Component, Input, NgModule} from '@angular/core';
|
||||||
|
import {BrowserModule} from '@angular/platform-browser';
|
||||||
|
|
||||||
|
import {TableCell, emptyTable} from '../util';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'largetable',
|
||||||
|
template:
|
||||||
|
`<table><tbody><tr *ngFor="let row of data; trackBy: trackByIndex"><td *ngFor="let cell of row; trackBy: trackByIndex" [style.backgroundColor]="cell.row % 2 ? '' : 'grey'">{{cell.value}}</td></tr></tbody></table>`
|
||||||
|
})
|
||||||
|
export class TableComponent {
|
||||||
|
@Input()
|
||||||
|
data: TableCell[][] = emptyTable;
|
||||||
|
|
||||||
|
trackByIndex(index: number, item: any) { return index; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
|
||||||
|
export class AppModule {
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Params</h2>
|
||||||
|
<form>
|
||||||
|
Cols:
|
||||||
|
<input type="number" name="cols" placeholder="cols" value="40">
|
||||||
|
<br>
|
||||||
|
Rows:
|
||||||
|
<input type="number" name="rows" placeholder="rows" value="200">
|
||||||
|
<br>
|
||||||
|
<button>Apply</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<h2>Ng2 with NgSwitch Largetable Benchmark</h2>
|
||||||
|
<p>
|
||||||
|
<button id="destroyDom">destroyDom</button>
|
||||||
|
<button id="createDom">createDom</button>
|
||||||
|
<button id="updateDomProfile">profile updateDom</button>
|
||||||
|
<button id="createDomProfile">profile createDom</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<largetable id="root"></largetable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../bootstrap_ng2.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import {ApplicationRef, NgModule, enableProdMode} from '@angular/core';
|
||||||
|
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
||||||
|
|
||||||
|
import {bindAction, profile} from '../../util';
|
||||||
|
import {buildTable, emptyTable} from '../util';
|
||||||
|
|
||||||
|
import {AppModule, TableComponent} from './table';
|
||||||
|
|
||||||
|
export function main() {
|
||||||
|
var table: TableComponent;
|
||||||
|
var appRef: ApplicationRef;
|
||||||
|
|
||||||
|
function destroyDom() {
|
||||||
|
table.data = emptyTable;
|
||||||
|
appRef.tick();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDom() {
|
||||||
|
table.data = buildTable();
|
||||||
|
appRef.tick();
|
||||||
|
}
|
||||||
|
|
||||||
|
function noop() {}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
enableProdMode();
|
||||||
|
platformBrowserDynamic().bootstrapModule(AppModule).then((ref) => {
|
||||||
|
var injector = ref.injector;
|
||||||
|
appRef = injector.get(ApplicationRef);
|
||||||
|
|
||||||
|
table = appRef.components[0].instance;
|
||||||
|
bindAction('#destroyDom', destroyDom);
|
||||||
|
bindAction('#createDom', createDom);
|
||||||
|
bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
|
||||||
|
bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import {Component, Input, NgModule} from '@angular/core';
|
||||||
|
import {BrowserModule} from '@angular/platform-browser';
|
||||||
|
|
||||||
|
import {TableCell, emptyTable} from '../util';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'largetable',
|
||||||
|
template: `<table><tbody>
|
||||||
|
<tr *ngFor="let row of data">
|
||||||
|
<template ngFor [ngForOf]="row" let-cell>
|
||||||
|
<ng-container [ngSwitch]="cell.row % 2">
|
||||||
|
<td *ngSwitchCase="0" style="background-color: grey">{{cell.value}}</td>
|
||||||
|
<td *ngSwitchDefault>{{cell.value}}</td>
|
||||||
|
</ng-container>
|
||||||
|
</template>
|
||||||
|
</tr></tbody></table>`
|
||||||
|
})
|
||||||
|
export class TableComponent {
|
||||||
|
@Input()
|
||||||
|
data: TableCell[][] = emptyTable;
|
||||||
|
}
|
||||||
|
|
||||||
|
@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
|
||||||
|
export class AppModule {
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
import {getIntParameter} from '../util';
|
||||||
|
|
||||||
|
export class TableCell {
|
||||||
|
constructor(public row: number, public col: number, public value: string) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
let tableCreateCount: number;
|
||||||
|
export let maxRow: number;
|
||||||
|
export let maxCol: number;
|
||||||
|
let numberData: TableCell[][];
|
||||||
|
let charData: TableCell[][];
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
maxRow = getIntParameter('rows');
|
||||||
|
maxCol = getIntParameter('cols');
|
||||||
|
tableCreateCount = 0;
|
||||||
|
numberData = [];
|
||||||
|
charData = [];
|
||||||
|
for (let r = 0; r <= maxRow; r++) {
|
||||||
|
const numberRow: TableCell[] = [];
|
||||||
|
numberData.push(numberRow);
|
||||||
|
const charRow: TableCell[] = [];
|
||||||
|
charData.push(charRow);
|
||||||
|
for (let c = 0; c <= maxCol; c++) {
|
||||||
|
numberRow.push(new TableCell(r, c, `${c}/${r}`));
|
||||||
|
charRow.push(new TableCell(r, c, `${charValue(c)}/${charValue(r)}`));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function charValue(i: number): string {
|
||||||
|
return String.fromCharCode('A'.charCodeAt(0) + (i % 26));
|
||||||
|
}
|
||||||
|
|
||||||
|
export const emptyTable: TableCell[][] = [];
|
||||||
|
|
||||||
|
export function buildTable(): TableCell[][] {
|
||||||
|
tableCreateCount++;
|
||||||
|
return tableCreateCount % 2 ? numberData : charData;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue