test(ivy): introduce a benchmark for duplicate style/class bindings (#33600)

Prior to this patch all the styling benchmarks only tested for
template-based style/class bindings. Because of each of the bindings
being only present in the template, there was no possibility of
there being any duplicate bindings. This benchmark introduces
style/class bindings being evaluated from both a template and from
various directives.

This benchmark can be executed by calling:

```
bazel build //packages/core/test/render3/perf:duplicate_style_and_class_bindings_lib.min_debug.es2015.js

node dist/bin/packages/core/test/render3/perf/duplicate_style_and_class_bindings_lib.min_debug.es2015.js
```

The benchmark is also run via the `profile_all.js` script (found in
`packages/core/test/render3/perf/`)

PR Close #33600

packages/core/test/render3/perf/BUILD.bazel

@@ -176,3 +176,16 @@ ng_benchmark(
     name = "map_based_style_and_class_bindings",
     bundle = ":map_based_style_and_class_bindings_lib",
 )
+
+ng_rollup_bundle(
+    name = "duplicate_style_and_class_bindings_lib",
+    entry_point = ":duplicate_style_and_class_bindings/index.ts",
+    deps = [
+        ":perf_lib",
+    ],
+)
+
+ng_benchmark(
+    name = "duplicate_style_and_class_bindings",
+    bundle = ":duplicate_style_and_class_bindings_lib",
+)

packages/core/test/render3/perf/duplicate_style_and_class_bindings/index.ts

@@ -0,0 +1,175 @@
+/**
+ * @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 {refreshView} from '../../../../src/render3/instructions/shared';
+import {ɵɵclassProp, ɵɵstyleProp} from '../../../../src/render3/instructions/styling';
+import {RenderFlags} from '../../../../src/render3/interfaces/definition';
+import {TVIEW} from '../../../../src/render3/interfaces/view';
+import {createBenchmark} from '../micro_bench';
+import {setupRootViewWithEmbeddedViews} from '../setup';
+import {defineBenchmarkTestDirective} from '../shared';
+
+`<ng-template>
+  <section>
+    <div [style.width]="'width1'"
+         [class.foo]="'foo1'"
+         dir-that-sets-width
+         dir-that-sets-foo-class></div>
+
+    <div [style.width]="'width2'"
+         [class.foo]="'foo2'"
+         dir-that-sets-width
+         dir-that-sets-foo-class></div>
+
+    <div [style.width]="'width3'"
+         [class.foo]="'foo3'"
+         dir-that-sets-width
+         dir-that-sets-foo-class></div>
+
+    <div [style.width]="'width4'"
+         [class.foo]="'foo4'"
+         dir-that-sets-width
+         dir-that-sets-foo-class></div>
+
+    <div [style.width]="'width5'"
+         [class.foo]="'foo5'"
+         dir-that-sets-width
+         dir-that-sets-foo-class></div>
+
+    <div [style.width]="'width6'"
+         [class.foo]="'foo6'"
+         dir-that-sets-width
+         dir-that-sets-foo-class></div>
+
+    <div [style.width]="'width7'"
+         [class.foo]="'foo7'"
+         dir-that-sets-width
+         dir-that-sets-foo-class></div>
+
+    <div [style.width]="'width8'"
+         [class.foo]="'foo8'"
+         dir-that-sets-width
+         dir-that-sets-foo-class></div>
+
+    <div [style.width]="'width9'"
+         [class.foo]="'foo9'"
+         dir-that-sets-width
+         dir-that-sets-foo-class></div>
+
+    <div [style.width]="'width10'"
+         [class.foo]="'foo10'"
+         dir-that-sets-width
+         dir-that-sets-foo-class></div>
+  </section>
+</ng-template>`;
+function testTemplate(rf: RenderFlags, ctx: any) {
+  if (rf & 1) {
+    ɵɵelementStart(0, 'section');
+    ɵɵelement(1, 'div', 0);
+    ɵɵelement(2, 'div', 0);
+    ɵɵelement(3, 'div', 0);
+    ɵɵelement(4, 'div', 0);
+    ɵɵelement(5, 'div', 0);
+    ɵɵelement(6, 'div', 0);
+    ɵɵelement(7, 'div', 0);
+    ɵɵelement(8, 'div', 0);
+    ɵɵelement(9, 'div', 0);
+    ɵɵelement(10, 'div', 0);
+    ɵɵelementEnd();
+  }
+  if (rf & 2) {
+    // 1
+    ɵɵadvance(1);
+    ɵɵstyleProp('width', '100px');
+    ɵɵclassProp('foo', true);
+
+    // 2
+    ɵɵadvance(1);
+    ɵɵstyleProp('width', '200px');
+    ɵɵclassProp('foo', true);
+
+    // 3
+    ɵɵadvance(1);
+    ɵɵstyleProp('width', '300px');
+    ɵɵclassProp('foo', true);
+
+    // 4
+    ɵɵadvance(1);
+    ɵɵstyleProp('width', '400px');
+    ɵɵclassProp('foo', true);
+
+    // 5
+    ɵɵadvance(1);
+    ɵɵstyleProp('width', '500px');
+    ɵɵclassProp('foo', true);
+
+    // 6
+    ɵɵadvance(1);
+    ɵɵstyleProp('width', '600px');
+    ɵɵclassProp('foo', true);
+
+    // 7
+    ɵɵadvance(1);
+    ɵɵstyleProp('width', '700px');
+    ɵɵclassProp('foo', true);
+
+    // 8
+    ɵɵadvance(1);
+    ɵɵstyleProp('width', '800px');
+    ɵɵclassProp('foo', true);
+
+    // 9
+    ɵɵadvance(1);
+    ɵɵstyleProp('width', '900px');
+    ɵɵclassProp('foo', true);
+
+    // 10
+    ɵɵadvance(1);
+    ɵɵstyleProp('width', '1000px');
+    ɵɵclassProp('foo', true);
+  }
+}
+
+function dirThatSetsWidthHostBindings(rf: RenderFlags, ctx: any) {
+  if (rf & 2) {
+    ɵɵstyleProp('width', '999px');
+  }
+}
+
+function dirThatSetsFooClassHostBindings(rf: RenderFlags, ctx: any) {
+  if (rf & 2) {
+    ɵɵclassProp('foo', false);
+  }
+}
+
+const rootLView = setupRootViewWithEmbeddedViews(
+    testTemplate, 11, 10, 1000, null,
+    [
+      ['dir-that-sets-width', '', 'dir-that-sets-foo-class', ''],
+    ],
+    [
+      defineBenchmarkTestDirective('dir-that-sets-width', dirThatSetsWidthHostBindings),
+      defineBenchmarkTestDirective('dir-that-sets-foo-class', dirThatSetsFooClassHostBindings),
+    ]);
+const rootTView = rootLView[TVIEW];
+
+// scenario to benchmark
+const duplicateStyleAndClassBindingsBenchmark =
+    createBenchmark('duplicate style and class bindings');
+const refreshTime = duplicateStyleAndClassBindingsBenchmark('refresh');
+
+// run change detection in the update mode
+console.profile('duplicate_style_and_class_bindings_refresh');
+while (refreshTime()) {
+  refreshView(rootLView, rootTView, null, null);
+}
+console.profileEnd();
+
+// report results
+duplicateStyleAndClassBindingsBenchmark.report();

packages/core/test/render3/perf/setup.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {addToViewTree, createLContainer, createLView, createTNode, createTView, getOrCreateTNode, refreshView, renderView} from '../../../src/render3/instructions/shared';
-import {ComponentTemplate} from '../../../src/render3/interfaces/definition';
+import {ComponentTemplate, DirectiveDefList} from '../../../src/render3/interfaces/definition';
 import {TAttributes, TNodeType, TViewNode} from '../../../src/render3/interfaces/node';
 import {RendererFactory3, domRendererFactory3} from '../../../src/render3/interfaces/renderer';
 import {LView, LViewFlags, TView, TViewType} from '../../../src/render3/interfaces/view';
@@ -28,8 +28,10 @@ export function createAndRenderLView(
 
 export function setupRootViewWithEmbeddedViews(
     templateFn: ComponentTemplate<any>| null, decls: number, vars: number, noOfViews: number,
-    embeddedViewContext: any = {}, consts: TAttributes[] | null = null): LView {
+    embeddedViewContext: any = {}, consts: TAttributes[] | null = null,
-  return setupTestHarness(templateFn, decls, vars, noOfViews, embeddedViewContext, consts)
+    directiveRegistry: DirectiveDefList | null = null): LView {
+  return setupTestHarness(
+             templateFn, decls, vars, noOfViews, embeddedViewContext, consts, directiveRegistry)
       .hostLView;
 }
 
@@ -43,7 +45,8 @@ export interface TestHarness {
 
 export function setupTestHarness(
     templateFn: ComponentTemplate<any>| null, decls: number, vars: number, noOfViews: number,
-    embeddedViewContext: any = {}, consts: TAttributes[] | null = null): TestHarness {
+    embeddedViewContext: any = {}, consts: TAttributes[] | null = null,
+    directiveRegistry: DirectiveDefList | null = null): TestHarness {
   // Create a root view with a container
   const hostTView = createTView(TViewType.Root, -1, null, 1, 0, null, null, null, null, consts);
   const tContainerNode = getOrCreateTNode(hostTView, null, 0, TNodeType.Container, null, null);
@@ -58,8 +61,8 @@ export function setupTestHarness(
 
 
   // create test embedded views
-  const embeddedTView =
+  const embeddedTView = createTView(
-      createTView(TViewType.Embedded, -1, templateFn, decls, vars, null, null, null, null, consts);
+      TViewType.Embedded, -1, templateFn, decls, vars, directiveRegistry, null, null, null, consts);
   const viewTNode = createTNode(hostTView, null, TNodeType.View, -1, null, null) as TViewNode;
 
   function createEmbeddedLView(): LView {

packages/core/test/render3/perf/shared.ts

@@ -0,0 +1,23 @@
+/**
+ * @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 {ɵɵdefineDirective} from '@angular/core/src/core';
+
+import {HostBindingsFunction} from '../../../src/render3/interfaces/definition';
+
+export function defineBenchmarkTestDirective(
+    selector: string, hostBindings: HostBindingsFunction<any>, type?: any) {
+  return ɵɵdefineDirective({
+    hostBindings,
+    type: type || FakeDirectiveType,
+    selectors: [['', selector, '']],
+  });
+}
+
+class FakeDirectiveType {
+  static ɵfac = () => { return {}; };
+}