From 3dee2244da60fcd4d24d57469ff93d32ee39da73 Mon Sep 17 00:00:00 2001 From: Pawel Kozlowski Date: Fri, 6 Dec 2019 15:35:14 +0100 Subject: [PATCH] perf(ivy): styling algorithm benchmark (#34664) PR Close #34664 --- modules/benchmarks/src/styling/BUILD.bazel | 1 + .../benchmarks/src/styling/ng2/BUILD.bazel | 32 +++++++++ modules/benchmarks/src/styling/ng2/index.html | 39 +++++++++++ .../benchmarks/src/styling/ng2/index_aot.ts | 16 +++++ modules/benchmarks/src/styling/ng2/init.ts | 65 +++++++++++++++++++ modules/benchmarks/src/styling/ng2/styling.ts | 43 ++++++++++++ 6 files changed, 196 insertions(+) create mode 100644 modules/benchmarks/src/styling/BUILD.bazel create mode 100644 modules/benchmarks/src/styling/ng2/BUILD.bazel create mode 100644 modules/benchmarks/src/styling/ng2/index.html create mode 100644 modules/benchmarks/src/styling/ng2/index_aot.ts create mode 100644 modules/benchmarks/src/styling/ng2/init.ts create mode 100644 modules/benchmarks/src/styling/ng2/styling.ts diff --git a/modules/benchmarks/src/styling/BUILD.bazel b/modules/benchmarks/src/styling/BUILD.bazel new file mode 100644 index 0000000000..ffd0fb0cdc --- /dev/null +++ b/modules/benchmarks/src/styling/BUILD.bazel @@ -0,0 +1 @@ +package(default_visibility = ["//visibility:public"]) diff --git a/modules/benchmarks/src/styling/ng2/BUILD.bazel b/modules/benchmarks/src/styling/ng2/BUILD.bazel new file mode 100644 index 0000000000..1161e99eaf --- /dev/null +++ b/modules/benchmarks/src/styling/ng2/BUILD.bazel @@ -0,0 +1,32 @@ +load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver") + +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_aot.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"], +) diff --git a/modules/benchmarks/src/styling/ng2/index.html b/modules/benchmarks/src/styling/ng2/index.html new file mode 100644 index 0000000000..e2a01fab21 --- /dev/null +++ b/modules/benchmarks/src/styling/ng2/index.html @@ -0,0 +1,39 @@ + + + + + + + + + + +

Styling bindings benchmark

+

+ + + + + + + +

+ +
+ Loading... +
+ + + + + + \ No newline at end of file diff --git a/modules/benchmarks/src/styling/ng2/index_aot.ts b/modules/benchmarks/src/styling/ng2/index_aot.ts new file mode 100644 index 0000000000..e9064fe144 --- /dev/null +++ b/modules/benchmarks/src/styling/ng2/index_aot.ts @@ -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 {StylingModuleNgFactory} from './styling.ngfactory'; + +enableProdMode(); +platformBrowser().bootstrapModuleFactory(StylingModuleNgFactory).then(init); diff --git a/modules/benchmarks/src/styling/ng2/init.ts b/modules/benchmarks/src/styling/ng2/init.ts new file mode 100644 index 0000000000..bec87b75bf --- /dev/null +++ b/modules/benchmarks/src/styling/ng2/init.ts @@ -0,0 +1,65 @@ +/** + * @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, profile} from '../../util'; +import {StylingModule} from './styling'; + +const empty = []; +const items = []; +for (let i = 0; i < 2000; i++) { + items.push(i); +} + + +export function init(moduleRef: NgModuleRef) { + const injector = moduleRef.injector; + const appRef = injector.get(ApplicationRef); + const componentRef = appRef.components[0]; + const component = componentRef.instance; + const componentHostEl = componentRef.location.nativeElement; + const select = document.querySelector('#scenario-select') !as HTMLSelectElement; + + function create(tplRefIdx: number) { + component.tplRefIdx = tplRefIdx; + component.data = items; + appRef.tick(); + } + + function destroy() { + component.data = empty; + appRef.tick(); + } + + function detectChanges() { + component.exp = component.exp === 'bar' ? 'baz' : 'bar'; + appRef.tick(); + } + + function modifyExternally() { + const buttonEls = componentHostEl.querySelectorAll('button') as HTMLButtonElement[]; + buttonEls.forEach((buttonEl: HTMLButtonElement) => { + const cl = buttonEl.classList; + if (cl.contains('external')) { + cl.remove('external'); + } else { + cl.add('external'); + } + }); + } + + bindAction('#create', () => create(select.selectedIndex)); + bindAction('#detectChanges', detectChanges); + bindAction('#destroy', destroy); + bindAction('#profile', profile(() => { + for (let i = 0; i < 10; i++) { + detectChanges(); + } + }, () => {}, 'detect changes')); + bindAction('#modify', modifyExternally); +} diff --git a/modules/benchmarks/src/styling/ng2/styling.ts b/modules/benchmarks/src/styling/ng2/styling.ts new file mode 100644 index 0000000000..6b6c8241b0 --- /dev/null +++ b/modules/benchmarks/src/styling/ng2/styling.ts @@ -0,0 +1,43 @@ +/** + * @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 {Component, NgModule, TemplateRef} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; + +@Component({ + selector: 'styling-bindings', + template: ` + + + + + + + + +
+ +
+ ` +}) +export class StylingComponent { + data: number[] = []; + exp: string = 'bar'; + tplRefIdx: number = 0; + staticStyle = {width: '10px'}; + + getTplRef(...tplRefs): TemplateRef { return tplRefs[this.tplRefIdx]; } +} + +@NgModule({ + imports: [BrowserModule], + declarations: [StylingComponent], + bootstrap: [StylingComponent], +}) +export class StylingModule { +} \ No newline at end of file