From ea378a993a2305f41ad5f1c3cd6638a618d26744 Mon Sep 17 00:00:00 2001 From: Pawel Kozlowski Date: Tue, 10 Sep 2019 12:10:03 +0200 Subject: [PATCH] perf(ivy): binding update benchmark (#32574) PR Close #32574 --- packages/core/test/render3/perf/BUILD.bazel | 8 ++ .../perf/property_binding_update/index.ts | 93 +++++++++++++++++++ packages/core/test/render3/perf/setup.ts | 6 +- 3 files changed, 104 insertions(+), 3 deletions(-) create mode 100644 packages/core/test/render3/perf/property_binding_update/index.ts diff --git a/packages/core/test/render3/perf/BUILD.bazel b/packages/core/test/render3/perf/BUILD.bazel index 84c1bba8f8..9a3ec8a354 100644 --- a/packages/core/test/render3/perf/BUILD.bazel +++ b/packages/core/test/render3/perf/BUILD.bazel @@ -45,6 +45,14 @@ ng_rollup_bundle( ], ) +ng_rollup_bundle( + name = "property_binding_update", + entry_point = ":property_binding_update/index.ts", + deps = [ + ":perf_lib", + ], +) + ng_rollup_bundle( name = "style_binding", entry_point = ":style_binding/index.ts", diff --git a/packages/core/test/render3/perf/property_binding_update/index.ts b/packages/core/test/render3/perf/property_binding_update/index.ts new file mode 100644 index 0000000000..071727827f --- /dev/null +++ b/packages/core/test/render3/perf/property_binding_update/index.ts @@ -0,0 +1,93 @@ +/** + * @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 {ɵɵadvance} from '../../../../src/render3/instructions/advance'; +import {ɵɵelement, ɵɵelementEnd, ɵɵelementStart} from '../../../../src/render3/instructions/element'; +import {ɵɵproperty} from '../../../../src/render3/instructions/property'; +import {refreshView} from '../../../../src/render3/instructions/shared'; +import {RenderFlags} from '../../../../src/render3/interfaces/definition'; +import {TVIEW} from '../../../../src/render3/interfaces/view'; +import {createBenchmark} from '../micro_bench'; +import {setupRootViewWithEmbeddedViews} from '../setup'; + +`
+ + + + + + + + + + +
+`; +function TestInterpolationComponent_ng_template_0_Template(rf: RenderFlags, ctx: {value: string}) { + if (rf & 1) { + ɵɵelementStart(0, 'div'); + ɵɵelement(1, 'button'); + ɵɵelement(2, 'button'); + ɵɵelement(3, 'button'); + ɵɵelement(4, 'button'); + ɵɵelement(5, 'button'); + ɵɵelement(6, 'button'); + ɵɵelement(7, 'button'); + ɵɵelement(8, 'button'); + ɵɵelement(9, 'button'); + ɵɵelement(10, 'button'); + ɵɵelementEnd(); + } + if (rf & 2) { + ɵɵadvance(1); + ɵɵproperty('prop1', ctx.value); + ɵɵadvance(1); + ɵɵproperty('prop2', ctx.value); + ɵɵadvance(1); + ɵɵproperty('prop3', ctx.value); + ɵɵadvance(1); + ɵɵproperty('prop4', ctx.value); + ɵɵadvance(1); + ɵɵproperty('prop5', ctx.value); + ɵɵadvance(1); + ɵɵproperty('prop6', ctx.value); + ɵɵadvance(1); + ɵɵproperty('prop7', ctx.value); + ɵɵadvance(1); + ɵɵproperty('prop8', ctx.value); + ɵɵadvance(1); + ɵɵproperty('prop9', ctx.value); + ɵɵadvance(1); + ɵɵproperty('prop10', ctx.value); + } +} + +const ctx = { + value: 'value' +}; + +const rootLView = setupRootViewWithEmbeddedViews( + TestInterpolationComponent_ng_template_0_Template, 11, 10, 1000, ctx); +const rootTView = rootLView[TVIEW]; + + +// scenario to benchmark +const propertyBindingBenchmark = createBenchmark('property binding', 2000, 20); +const updateTime = propertyBindingBenchmark('update'); + +// run change detection where each binding value changes +console.profile('element property update'); +while (updateTime.run()) { + let i = 0; + while (updateTime()) { + ctx.value = `value${i++}`; + refreshView(rootLView, rootTView, null, ctx); + } +} +console.profileEnd(); + +propertyBindingBenchmark.report(); \ No newline at end of file diff --git a/packages/core/test/render3/perf/setup.ts b/packages/core/test/render3/perf/setup.ts index 341502c23f..dd2de738f9 100644 --- a/packages/core/test/render3/perf/setup.ts +++ b/packages/core/test/render3/perf/setup.ts @@ -23,8 +23,8 @@ export function createAndRenderLView( } export function setupRootViewWithEmbeddedViews( - templateFn: ComponentTemplate| null, consts: number, vars: number, - noOfViews: number): LView { + templateFn: ComponentTemplate| null, consts: number, vars: number, noOfViews: number, + embeddedViewContext: any = {}): LView { // Create a root view with a container const rootTView = createTView(-1, null, 1, 0, null, null, null, null); const tContainerNode = getOrCreateTNode(rootTView, null, 0, TNodeType.Container, null, null); @@ -44,7 +44,7 @@ export function setupRootViewWithEmbeddedViews( // create embedded views and add them to the container for (let i = 0; i < noOfViews; i++) { const embeddedLView = createLView( - rootLView, embeddedTView, {}, LViewFlags.CheckAlways, null, viewTNode, + rootLView, embeddedTView, embeddedViewContext, LViewFlags.CheckAlways, null, viewTNode, new NoopRendererFactory(), new NoopRenderer()); renderView(embeddedLView, embeddedTView, null); insertView(embeddedLView, lContainer, i);