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

perf: add js-web-frameworks benchmark (#34034) 

PR Close #34034
This commit is contained in:
Pawel Kozlowski 2019-11-21 16:01:01 +01:00 committed by Miško Hevery
parent ea37e82e69
commit df6d6e0b1d
7 changed files with 336 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
modules/benchmarks/src/js-web-frameworks/BUILD.bazel Normal file
View File

@ -0,0 +1,13 @@
load("//tools:defaults.bzl", "ts_library")
package(default_visibility = ["//visibility:public"])
ts_library(
name = "perf_lib",
testonly = True,
srcs = ["perf.spec.ts"],
deps = [
"//modules/e2e_util",
"@npm//protractor",
],
)

39
modules/benchmarks/src/js-web-frameworks/ng2/BUILD.bazel Normal file
View File

@ -0,0 +1,39 @@
load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test")
package(default_visibility = ["//modules/benchmarks:__subpackages__"])
ng_module(
name = "ng2",
srcs = glob(["*.ts"]),
generate_ve_shims = True,
tsconfig = "//modules/benchmarks:tsconfig-build.json",
deps = [
"//modules/benchmarks/src:util_lib",
"//packages/core",
"//packages/platform-browser",
],
)
ng_rollup_bundle(
name = "bundle",
entry_point = ":index.ts",
deps = [
":ng2",
"@npm//rxjs",
],
)
ts_devserver(
name = "prodserver",
bootstrap = ["//packages/zone.js/dist:zone.js"],
port = 4200,
static_files = ["index.html"],
deps = [":bundle.min_debug.es2015.js"],
)
benchmark_test(
name = "perf",
server = ":prodserver",
deps = ["//modules/benchmarks/src/js-web-frameworks:perf_lib"],
)

28
modules/benchmarks/src/js-web-frameworks/ng2/index.html Normal file
View File

@ -0,0 +1,28 @@
<!doctype html>
<html>
<head>
<!-- Prevent the browser from requesting any favicon. -->
<link rel="icon" href="data:,">
</head>
<body>
<h2>Angular <a href="https://www.stefankrause.net/wp/?p=504" target="_blank">JS Web Frameworks benchmark</a></h2>
<p>
<button id="create1KRows">create 1K rows</button>
<button id="create10KRows">create 10K rows</button>
<button id="deleteAll">delete all rows</button>
<button id="update">update every 10th row</button>
<button id="swap">swap 2 rows</button>
</p>
<div>
<js-web-frameworks id="root">Loading...</js-web-frameworks>
</div>
<!--load location for ts_devserver-->
<script src="/app_bundle.js"></script>
</body>
</html>

16
modules/benchmarks/src/js-web-frameworks/ng2/index.ts Normal file
View File

@ -0,0 +1,16 @@
/**
* @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 {enableProdMode} from '@angular/core';
import {platformBrowser} from '@angular/platform-browser';
import {init} from './init';
import {JsWebFrameworksModuleNgFactory} from './rows.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(JsWebFrameworksModuleNgFactory).then(init);

92
modules/benchmarks/src/js-web-frameworks/ng2/init.ts Normal file
View File

@ -0,0 +1,92 @@
/**
* @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 {ApplicationRef, NgModuleRef} from '@angular/core';
import {bindAction} from '../../util';
import {JsWebFrameworksComponent, JsWebFrameworksModule, RowData} from './rows';
function _random(max: number) {
return Math.round(Math.random() * 1000) % max;
}
function buildData(count: number): Array<RowData> {
const data: Array<RowData> = [];
for (let i = 0; i < count; i++) {
data.push({
id: i,
label: ADJECTIVES[_random(ADJECTIVES.length)] + ' ' + COLOURS[_random(COLOURS.length)] + ' ' +
NOUNS[_random(NOUNS.length)]
});
}
return data;
}
const ADJECTIVES = [
'pretty', 'large', 'big', 'small', 'tall', 'short', 'long',
'handsome', 'plain', 'quaint', 'clean', 'elegant', 'easy', 'angry',
'crazy', 'helpful', 'mushy', 'odd', 'unsightly', 'adorable', 'important',
'inexpensive', 'cheap', 'expensive', 'fancy'
];
const COLOURS = [
'red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'
];
const NOUNS = [
'table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza',
'mouse', 'keyboard'
];
export function init(moduleRef: NgModuleRef<JsWebFrameworksModule>) {
let component: JsWebFrameworksComponent;
let appRef: ApplicationRef;
function create1K() {
component.data = buildData(1 * 1000);
appRef.tick();
}
function create10K() {
component.data = buildData(10 * 1000);
appRef.tick();
}
function deleteAll() {
component.data = [];
appRef.tick();
}
function update() {
for (let i = 0; i < component.data.length; i += 10) {
component.data[i].label += ' !!!';
}
appRef.tick();
}
function swapRows() {
const data = component.data;
if (data.length > 998) {
const a = data[1];
data[1] = data[998];
data[998] = a;
}
appRef.tick();
}
const injector = moduleRef.injector;
appRef = injector.get(ApplicationRef);
component = appRef.components[0].instance;
bindAction('#create1KRows', create1K);
bindAction('#create10KRows', create10K);
bindAction('#deleteAll', deleteAll);
bindAction('#update', update);
bindAction('#swap', swapRows);
}

70
modules/benchmarks/src/js-web-frameworks/ng2/rows.ts Normal file
View File

@ -0,0 +1,70 @@
/**
* @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 {ApplicationRef, Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
export interface RowData {
id: number;
label: string;
}
@Component({
selector: 'js-web-frameworks',
template: `
<table class="table table-hover table-striped test-data">
<tbody>
<tr [class.danger]="item.id === selected" *ngFor="let item of data; trackBy: itemById">
<td class="col-md-1">{{item.id}}</td>
<td class="col-md-4">
<a href="#" (click)="select(item.id); $event.preventDefault()">{{item.label}}</a>
</td>
<td class="col-md-1">
<a href="#" (click)="delete(item.id); $event.preventDefault()">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
<td class="col-md-6"></td>
</tr>
</tbody>
</table>
`
})
export class JsWebFrameworksComponent {
data: Array<RowData> = [];
selected: number|null;
constructor(private _appRef: ApplicationRef) {}
itemById(index: number, item: RowData) { return item.id; }
select(itemId: number) {
this.selected = itemId;
this._appRef.tick();
}
delete (itemId: number) {
const data = this.data;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].id === itemId) {
data.splice(i, 1);
break;
}
}
this._appRef.tick();
}
}
@NgModule({
imports: [BrowserModule],
declarations: [JsWebFrameworksComponent],
bootstrap: [JsWebFrameworksComponent],
})
export class JsWebFrameworksModule {
}

78
modules/benchmarks/src/js-web-frameworks/perf.spec.ts Normal file
View File

@ -0,0 +1,78 @@
/**
* @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 {$} from 'protractor';
import {runBenchmark, verifyNoBrowserErrors} from '../../../e2e_util/perf_util';
interface Worker {
id: string;
prepare?(): void;
work(): void;
}
const Create1KWorker: Worker = {
id: 'create1K',
prepare: () => $('#deleteAll').click(),
work: () => $('#create1KRows').click()
};
const Delete1KWorker: Worker = {
id: 'delete1K',
prepare: () => $('#create1KRows').click(),
work: () => { $('#deleteAll').click(); }
};
const UpdateWorker: Worker = {
id: 'update',
prepare: () => $('#create1KRows').click(),
work: () => { $('#update').click(); }
};
const SwapWorker: Worker = {
id: 'swap',
prepare: () => $('#create1KRows').click(),
work: () => { $('#swap').click(); }
};
// In order to make sure that we don't change the ids of the benchmarks, we need to
// determine the current test package name from the Bazel target. This is necessary
// because previous to the Bazel conversion, the benchmark test ids contained the test
// name. e.g. "largeTable.ng2_switch.createDestroy". We determine the name of the
// Bazel package where this test runs from the current test target. The Bazel target
// looks like: "//modules/benchmarks/src/largetable/{pkg_name}:{target_name}".
const testPackageName = process.env['BAZEL_TARGET'] !.split(':')[0].split('/').pop();
describe('js-web-frameworks benchmark perf', () => {
afterEach(verifyNoBrowserErrors);
[Create1KWorker, Delete1KWorker, UpdateWorker, SwapWorker].forEach((worker) => {
describe(worker.id, () => {
it(`should run benchmark for ${testPackageName}`, done => {
runTableBenchmark({
id: `js-web-frameworks.${testPackageName}.${worker.id}`,
url: '/',
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: [],
prepare: config.worker.prepare,
work: config.worker.work
});
}