From ba5e07efc78159026b84360e76f08f5c6b7999af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Thu, 29 Aug 2019 12:47:47 -0400 Subject: [PATCH] perf(ivy): add a micro benchmark for map-based style and class bindings (#32401) This patch introduces a new micro benchmark that performance tests against map-based style and class bindings in Ivy running together on the same element. PR Close #32401 --- packages/core/test/render3/perf/BUILD.bazel | 8 ++ .../index.ts | 118 ++++++++++++++++++ .../perf/style_and_class_bindings/index.ts | 74 ++++++----- 3 files changed, 168 insertions(+), 32 deletions(-) create mode 100644 packages/core/test/render3/perf/map_based_style_and_class_bindings/index.ts diff --git a/packages/core/test/render3/perf/BUILD.bazel b/packages/core/test/render3/perf/BUILD.bazel index 895c452b6b..1520e05141 100644 --- a/packages/core/test/render3/perf/BUILD.bazel +++ b/packages/core/test/render3/perf/BUILD.bazel @@ -59,3 +59,11 @@ ng_rollup_bundle( ":perf_lib", ], ) + +ng_rollup_bundle( + name = "map_based_style_and_class_bindings", + entry_point = ":map_based_style_and_class_bindings/index.ts", + deps = [ + ":perf_lib", + ], +) diff --git a/packages/core/test/render3/perf/map_based_style_and_class_bindings/index.ts b/packages/core/test/render3/perf/map_based_style_and_class_bindings/index.ts new file mode 100644 index 0000000000..0e9cd9cd4d --- /dev/null +++ b/packages/core/test/render3/perf/map_based_style_and_class_bindings/index.ts @@ -0,0 +1,118 @@ +/** + * @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 {ɵɵclassMap, ɵɵstyleMap, ɵɵ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, 'div'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(2, 'div'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(3, 'div'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(4, 'div'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(5, 'div'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(6, 'div'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(7, 'div'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(8, 'div'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(9, 'div'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart(10, 'div'); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementEnd(); + } + if (rf & 2) { + ɵɵselect(1); + ɵɵstyleMap({width: '0px', height: '0px'}); + ɵɵclassMap('one two'); + ɵɵstylingApply(); + ɵɵselect(2); + ɵɵstyleMap({width: '10px', height: '100px'}); + ɵɵclassMap('one two'); + ɵɵstylingApply(); + ɵɵselect(3); + ɵɵstyleMap({width: '20px', height: '200px'}); + ɵɵclassMap('one two'); + ɵɵstylingApply(); + ɵɵselect(4); + ɵɵstyleMap({width: '30px', height: '300px'}); + ɵɵclassMap('one two'); + ɵɵstylingApply(); + ɵɵselect(5); + ɵɵstyleMap({width: '40px', height: '400px'}); + ɵɵclassMap('one two'); + ɵɵstylingApply(); + ɵɵselect(6); + ɵɵstyleMap({width: '50px', height: '500px'}); + ɵɵclassMap('one two'); + ɵɵstylingApply(); + ɵɵselect(7); + ɵɵstyleMap({width: '60px', height: '600px'}); + ɵɵclassMap('one two'); + ɵɵstylingApply(); + ɵɵselect(8); + ɵɵstyleMap({width: '70px', height: '700px'}); + ɵɵclassMap('one two'); + ɵɵstylingApply(); + ɵɵselect(9); + ɵɵstyleMap({width: '80px', height: '800px'}); + ɵɵclassMap('one two'); + ɵɵstylingApply(); + ɵɵselect(10); + ɵɵstyleMap({width: '90px', height: '900px'}); + ɵɵclassMap('one two'); + ɵɵ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(); diff --git a/packages/core/test/render3/perf/style_and_class_bindings/index.ts b/packages/core/test/render3/perf/style_and_class_bindings/index.ts index 2db4a1f1d8..3a4946d838 100644 --- a/packages/core/test/render3/perf/style_and_class_bindings/index.ts +++ b/packages/core/test/render3/perf/style_and_class_bindings/index.ts @@ -9,9 +9,9 @@ import {ɵɵelementEnd, ɵɵelementStart} from '../../../../src/render3/instruct 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 {AttributeMarker} from '../../../../src/render3/interfaces/node'; -import {ɵɵstyleProp, ɵɵclassProp, ɵɵstyling, ɵɵstylingApply} from '../../../../src/render3/styling_next/instructions'; +import {TVIEW} from '../../../../src/render3/interfaces/view'; +import {ɵɵclassProp, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply} from '../../../../src/render3/styling_next/instructions'; import {setupRootViewWithEmbeddedViews} from '../setup'; ` @@ -31,36 +31,46 @@ import {setupRootViewWithEmbeddedViews} from '../setup'; function testTemplate(rf: RenderFlags, ctx: any) { if (rf & 1) { ɵɵelementStart(0, 'div', [AttributeMarker.Classes, 'list']); - ɵɵelementStart(1, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵstyling(); - ɵɵelementEnd(); - ɵɵelementStart(2, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵstyling(); - ɵɵelementEnd(); - ɵɵelementStart(3, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵstyling(); - ɵɵelementEnd(); - ɵɵelementStart(4, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵstyling(); - ɵɵelementEnd(); - ɵɵelementStart(5, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵstyling(); - ɵɵelementEnd(); - ɵɵelementStart(6, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵstyling(); - ɵɵelementEnd(); - ɵɵelementStart(7, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵstyling(); - ɵɵelementEnd(); - ɵɵelementStart(8, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵstyling(); - ɵɵelementEnd(); - ɵɵelementStart(9, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵstyling(); - ɵɵelementEnd(); - ɵɵelementStart(10, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); - ɵɵstyling(); - ɵɵelementEnd(); + ɵɵelementStart( + 1, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart( + 2, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart( + 3, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart( + 4, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart( + 5, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart( + 6, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart( + 7, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart( + 8, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart( + 9, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); + ɵɵstyling(); + ɵɵelementEnd(); + ɵɵelementStart( + 10, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']); + ɵɵstyling(); + ɵɵelementEnd(); ɵɵelementEnd(); } if (rf & 2) {