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

fix(ivy): update largetable benchmark to use ngFor (#26604) 

PR Close #26604
This commit is contained in:
Kara Erickson 2018-10-19 15:52:27 -07:00 committed by Alex Rickabaugh
parent a9f2952882
commit 1006eab482
8 changed files with 52 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
modules/benchmarks/e2e_test/largetable_perf.ts
View File

@ -56,15 +56,6 @@ describe('largetable benchmark perf', () => {
}).then(done, done.fail);
});
it('should run for render3', done => {
runTableBenchmark({
id: `largeTable.render3.${worker.id}`,
url: 'all/benchmarks/src/largetable/render3/index.html',
ignoreBrowserSynchronization: true,
worker: worker
}).then(done, done.fail);
});
it('should run for iv', done => {
runTableBenchmark({
id: `largeTable.iv.${worker.id}`,

7
modules/benchmarks/e2e_test/largetable_spec.ts
View File

@ -25,13 +25,6 @@ describe('largetable benchmark spec', () => {
});
});
it('should work for render3', () => {
testTableBenchmark({
url: 'all/benchmarks/src/largetable/render3/index.html',
ignoreBrowserSynchronization: true,
});
});
it('should work for iv', () => {
testTableBenchmark({
url: 'all/benchmarks/src/largetable/iv/index.html',

17
modules/benchmarks/src/largetable/largetable_perf.spec.ts
View File

@ -8,6 +8,7 @@
import {$} from 'protractor';
import {openBrowser} from '../../../e2e_util/e2e_util';
import {runBenchmark, verifyNoBrowserErrors} from '../../../e2e_util/perf_util';
interface Worker {
@ -39,9 +40,23 @@ describe('largetable benchmark perf', () => {
afterEach(verifyNoBrowserErrors);
it('should render the table for render3', () => {
openBrowser({
url: '',
ignoreBrowserSynchronization: true,
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() as any).toEqual('');
});
[CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => {
describe(worker.id, () => {
it('should run for render3', done => {
it('should run benchmark for render3', done => {
runTableBenchmark({
id: `largeTable.render3.${worker.id}`,
url: 'index.html',

11
modules/benchmarks/src/largetable/render3/BUILD.bazel
View File

@ -1,10 +1,10 @@
package(default_visibility = ["//visibility:public"])
load("//tools:defaults.bzl", "ng_rollup_bundle", "ts_library")
load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle")
load("//packages/bazel:index.bzl", "protractor_web_test")
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
ts_library(
ng_module(
name = "largetable_lib",
srcs = glob(
[
@ -12,18 +12,20 @@ ts_library(
],
exclude = ["protractor.on-prepare.ts"],
),
tags = ["ivy-only"],
deps = [
"//modules/benchmarks/src:util_lib",
"//modules/benchmarks/src/largetable:util_lib",
"//packages:types",
"//packages/common",
"//packages/core",
"@rxjs",
],
)
ng_rollup_bundle(
name = "bundle",
entry_point = "modules/benchmarks/src/largetable/render3/index.js",
tags = ["ivy-only"],
deps = [
":largetable_lib",
],
@ -44,6 +46,7 @@ ts_devserver(
"index.html",
":favicon",
],
tags = ["ivy-only"],
)
protractor_web_test(
@ -59,7 +62,7 @@ protractor_web_test(
],
on_prepare = ":protractor.on-prepare.js",
server = ":devserver",
tags = ["manual"],
tags = ["ivy-only"],
deps = [
"//modules/benchmarks/src/largetable:perf_lib",
],

8
modules/benchmarks/src/largetable/render3/index.html
View File

@ -28,14 +28,8 @@
<script>
// TODO(mlaval): remove once we have a proper solution
ngDevMode = false;
var isBazel = location.pathname.indexOf('/all/') !== 0;
// isBazel needed while 'scripts/ci/test-e2e.sh test.e2e.protractor-e2e' is run
// on Travis
// TODO: port remaining protractor e2e tests to bazel protractor_web_test_suite rule
var bazelBundle = document.location.search.endsWith('debug') ? 'bundle.min_debug.js' : 'bundle.min.js';
var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
|| '../../bootstrap_ng2.js';
document.write('<script src="' + (isBazel ? bazelBundle : mainUrl) + '">\u003c/script>');
document.write('<script src="' + bazelBundle + '">\u003c/script>');
</script>
</body>

2
modules/benchmarks/src/largetable/render3/index.ts
View File

@ -5,7 +5,7 @@
* 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 'reflect-metadata';
import {ɵrenderComponent as renderComponent} from '@angular/core';
import {bindAction, profile} from '../../util';

87
modules/benchmarks/src/largetable/render3/table.ts
View File

@ -6,76 +6,39 @@
* found in the LICENSE file at https://angular.io/license
*/
import {ɵRenderFlags, ɵbind, ɵcontainer, ɵcontainerRefreshEnd, ɵcontainerRefreshStart, ɵdefineComponent, ɵdetectChanges, ɵelementEnd, ɵelementStart, ɵelementStyleProp, ɵelementStyling, ɵembeddedViewEnd, ɵembeddedViewStart, ɵtext, ɵtextBinding as ɵtextBinding} from '@angular/core';
import {ComponentDef} from '@angular/core/src/render3/interfaces/definition';
import {CommonModule} from '@angular/common';
import {Component, Input, NgModule, ɵdetectChanges} from '@angular/core';
import {TableCell, buildTable, emptyTable} from '../util';
const c0 = ['background-color'];
@Component({
selector: 'largetable',
template: `
<table>
<tbody>
<tr *ngFor="let row of data; trackBy: trackByIndex">
<td *ngFor="let cell of row; trackBy: trackByIndex" [style.background-color]="getColor(cell.row)">
{{cell.value}}
</td>
</tr>
</tbody>
</table>
`,
})
export class LargeTableComponent {
@Input()
data: TableCell[][] = emptyTable;
/** @nocollapse */
static ngComponentDef: ComponentDef<LargeTableComponent> = ɵdefineComponent({
type: LargeTableComponent,
selectors: [['largetable']],
consts: 3,
vars: 0,
template: function(rf: ɵRenderFlags, ctx: LargeTableComponent) {
if (rf & ɵRenderFlags.Create) {
ɵelementStart(0, 'table');
{
ɵelementStart(1, 'tbody');
{ ɵcontainer(2); }
ɵelementEnd();
}
ɵelementEnd();
}
if (rf & ɵRenderFlags.Update) {
ɵcontainerRefreshStart(2);
{
for (let row of ctx.data) {
let rf1 = ɵembeddedViewStart(1, 2, 0);
{
if (rf1 & ɵRenderFlags.Create) {
ɵelementStart(0, 'tr');
ɵcontainer(1);
ɵelementEnd();
}
if (rf1 & ɵRenderFlags.Update) {
ɵcontainerRefreshStart(1);
{
for (let cell of row) {
let rf2 = ɵembeddedViewStart(2, 2, 1);
{
if (rf2 & ɵRenderFlags.Create) {
ɵelementStart(0, 'td');
ɵelementStyling(null, c0);
{ ɵtext(1); }
ɵelementEnd();
}
if (rf2 & ɵRenderFlags.Update) {
ɵelementStyleProp(0, 0, null, cell.row % 2 ? '' : 'grey');
ɵtextBinding(1, ɵbind(cell.value));
}
}
ɵembeddedViewEnd();
}
}
ɵcontainerRefreshEnd();
}
}
ɵembeddedViewEnd();
}
}
ɵcontainerRefreshEnd();
}
},
factory: () => new LargeTableComponent(),
inputs: {data: 'data'}
});
trackByIndex(index: number, item: any) { return index; }
getColor(row: number) { return row % 2 ? '' : 'grey'; }
}
@NgModule({declarations: [LargeTableComponent], imports: [CommonModule]})
class TableModule {
}
export function destroyDom(component: LargeTableComponent) {
component.data = emptyTable;
ɵdetectChanges(component);

1
modules/e2e_util/perf_util.ts
View File

@ -40,6 +40,7 @@ export function runBenchmark(config: {
if (config.setup) {
config.setup();
}
if (!cmdArgs) readCommandLine();
const description: {[key: string]: any} = {'bundles': cmdArgs.bundles};
config.params.forEach((param) => { description[param.name] = param.value; });
return runner.sample({