From 253a1125bfc781b2610f8c0c6c22e6868446b175 Mon Sep 17 00:00:00 2001 From: Pawel Kozlowski Date: Mon, 12 Aug 2019 14:41:52 +0200 Subject: [PATCH] test(ivy): add style binding node-based micro benchmark (#32104) PR Close #32104 --- packages/core/test/render3/perf/BUILD.bazel | 12 +- .../test/render3/perf/interpolation/index.ts | 7 ++ .../perf/noop_change_detection/index.ts | 7 ++ .../core/test/render3/perf/noop_renderer.ts | 17 +-- .../render3/perf/property_binding/index.ts | 7 ++ packages/core/test/render3/perf/setup.ts | 7 ++ .../test/render3/perf/style_binding/index.ts | 108 ++++++++++++++++++ 7 files changed, 156 insertions(+), 9 deletions(-) create mode 100644 packages/core/test/render3/perf/style_binding/index.ts diff --git a/packages/core/test/render3/perf/BUILD.bazel b/packages/core/test/render3/perf/BUILD.bazel index 109ddc3614..dbf6a9d52b 100644 --- a/packages/core/test/render3/perf/BUILD.bazel +++ b/packages/core/test/render3/perf/BUILD.bazel @@ -1,6 +1,6 @@ package(default_visibility = ["//visibility:private"]) -load("//tools:defaults.bzl", "ts_library", "ng_rollup_bundle") +load("//tools:defaults.bzl", "ng_rollup_bundle", "ts_library") ts_library( name = "perf_lib", @@ -34,4 +34,12 @@ ng_rollup_bundle( deps = [ ":perf_lib", ], -) \ No newline at end of file +) + +ng_rollup_bundle( + name = "style_binding", + entry_point = ":style_binding/index.ts", + deps = [ + ":perf_lib", + ], +) diff --git a/packages/core/test/render3/perf/interpolation/index.ts b/packages/core/test/render3/perf/interpolation/index.ts index 5ae83f3924..0333ba57f0 100644 --- a/packages/core/test/render3/perf/interpolation/index.ts +++ b/packages/core/test/render3/perf/interpolation/index.ts @@ -1,3 +1,10 @@ +/** + * @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 {ɵɵelementEnd, ɵɵelementStart} from '../../../../src/render3/instructions/element'; import {ɵɵselect} from '../../../../src/render3/instructions/select'; import {refreshView} from '../../../../src/render3/instructions/shared'; diff --git a/packages/core/test/render3/perf/noop_change_detection/index.ts b/packages/core/test/render3/perf/noop_change_detection/index.ts index b983950e0d..df3264dc33 100644 --- a/packages/core/test/render3/perf/noop_change_detection/index.ts +++ b/packages/core/test/render3/perf/noop_change_detection/index.ts @@ -1,3 +1,10 @@ +/** + * @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 {refreshView} from '../../../../src/render3/instructions/shared'; import {TVIEW} from '../../../../src/render3/interfaces/view'; import {setupRootViewWithEmbeddedViews} from '../setup'; diff --git a/packages/core/test/render3/perf/noop_renderer.ts b/packages/core/test/render3/perf/noop_renderer.ts index 8c95b007ec..2ffb05dc1c 100644 --- a/packages/core/test/render3/perf/noop_renderer.ts +++ b/packages/core/test/render3/perf/noop_renderer.ts @@ -1,3 +1,10 @@ +/** + * @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 {ProceduralRenderer3, RComment, RElement, RNode, RText, Renderer3, RendererFactory3, RendererStyleFlags3} from '../../../src/render3/interfaces/renderer'; export class WebWorkerRenderNode implements RNode, RComment, RText { @@ -32,13 +39,9 @@ export class NoopRenderer implements ProceduralRenderer3 { } addClass(el: RElement, name: string): void { throw new Error('Method not implemented.'); } removeClass(el: RElement, name: string): void { throw new Error('Method not implemented.'); } - setStyle(el: RElement, style: string, value: any, flags?: RendererStyleFlags3|undefined): void { - throw new Error('Method not implemented.'); - } - removeStyle(el: RElement, style: string, flags?: RendererStyleFlags3|undefined): void { - throw new Error('Method not implemented.'); - } - setProperty(el: RElement, name: string, value: any): void { (el as any)[name] = value; } + setStyle(el: RElement, style: string, value: any, flags?: RendererStyleFlags3|undefined): void {} + removeStyle(el: RElement, style: string, flags?: RendererStyleFlags3|undefined): void {} + setProperty(el: RElement, name: string, value: any): void {} setValue(node: RComment|RText, value: string): void { node.textContent = value; } listen( target: RNode|'document'|'window'|'body', eventName: string, diff --git a/packages/core/test/render3/perf/property_binding/index.ts b/packages/core/test/render3/perf/property_binding/index.ts index 3926372013..d9ae4531d0 100644 --- a/packages/core/test/render3/perf/property_binding/index.ts +++ b/packages/core/test/render3/perf/property_binding/index.ts @@ -1,3 +1,10 @@ +/** + * @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 {ɵɵelement, ɵɵelementEnd, ɵɵelementStart} from '../../../../src/render3/instructions/element'; import {ɵɵproperty} from '../../../../src/render3/instructions/property'; import {ɵɵselect} from '../../../../src/render3/instructions/select'; diff --git a/packages/core/test/render3/perf/setup.ts b/packages/core/test/render3/perf/setup.ts index 917b426259..116922db39 100644 --- a/packages/core/test/render3/perf/setup.ts +++ b/packages/core/test/render3/perf/setup.ts @@ -1,3 +1,10 @@ +/** + * @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 {addToViewTree, createLContainer, createLView, createTNode, createTView, getOrCreateTNode, renderView} from '../../../src/render3/instructions/shared'; import {ComponentTemplate} from '../../../src/render3/interfaces/definition'; import {TNodeType, TViewNode} from '../../../src/render3/interfaces/node'; diff --git a/packages/core/test/render3/perf/style_binding/index.ts b/packages/core/test/render3/perf/style_binding/index.ts new file mode 100644 index 0000000000..ba28174322 --- /dev/null +++ b/packages/core/test/render3/perf/style_binding/index.ts @@ -0,0 +1,108 @@ +/** + * @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 {ɵɵelementEnd, ɵɵelementStart} from '../../../../src/render3/instructions/element'; +import {ɵɵselect} from '../../../../src/render3/instructions/select'; +import {refreshView} from '../../../../src/render3/instructions/shared'; +import {RenderFlags} from '../../../../src/render3/interfaces/definition'; +import {TVIEW} from '../../../../src/render3/interfaces/view'; +import {ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply} from '../../../../src/render3/styling_next/instructions'; +import {setupRootViewWithEmbeddedViews} from '../setup'; + +` +
+ + + + + + + + + + +
+`; +function testTemplate(rf: RenderFlags, ctx: any) { + if (rf & 1) { + ɵɵelementStart(0, 'div'); + ɵɵelementStart(1, 'button'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(2, 'button'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(3, 'button'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(4, 'button'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(5, 'button'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(6, 'button'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(7, 'button'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(8, 'button'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(9, 'button'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(10, 'button'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementEnd(); + } + if (rf & 2) { + ɵɵselect(1); + ɵɵstyleProp('background-color', 'color1'); + ɵɵstylingApply(); + ɵɵselect(2); + ɵɵstyleProp('background-color', 'color2'); + ɵɵstylingApply(); + ɵɵselect(3); + ɵɵstyleProp('background-color', 'color3'); + ɵɵstylingApply(); + ɵɵselect(4); + ɵɵstyleProp('background-color', 'color4'); + ɵɵstylingApply(); + ɵɵselect(5); + ɵɵstyleProp('background-color', 'color5'); + ɵɵstylingApply(); + ɵɵselect(6); + ɵɵstyleProp('background-color', 'color6'); + ɵɵstylingApply(); + ɵɵselect(7); + ɵɵstyleProp('background-color', 'color7'); + ɵɵstylingApply(); + ɵɵselect(8); + ɵɵstyleProp('background-color', 'color8'); + ɵɵstylingApply(); + ɵɵselect(9); + ɵɵstyleProp('background-color', 'color9'); + ɵɵstylingApply(); + ɵɵselect(10); + ɵɵstyleProp('background-color', 'color10'); + ɵɵstylingApply(); + } +} + + +const rootLView = setupRootViewWithEmbeddedViews(testTemplate, 11, 10, 1000); +const rootTView = rootLView[TVIEW]; + +// run change detection in the update mode +console.profile('update'); +for (let i = 0; i < 5000; i++) { + refreshView(rootLView, rootTView, null, null); +} +console.profileEnd(); \ No newline at end of file