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

@@ -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",
+    ],
+)

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';
+
+`<ng-template>
+  <div>
+    <div [style]="{width:'0px', height: '100px'}" [class]="'one two'"></div>
+    <div [style]="{width:'10px', height: '200px'}" [class]="'one two'"></div>
+    <div [style]="{width:'20px', height: '300px'}" [class]="'one two'"></div>
+    <div [style]="{width:'30px', height: '400px'}" [class]="'one two'"></div>
+    <div [style]="{width:'40px', height: '500px'}" [class]="'one two'"></div>
+    <div [style]="{width:'50px', height: '600px'}" [class]="'one two'"></div>
+    <div [style]="{width:'60px', height: '700px'}" [class]="'one two'"></div>
+    <div [style]="{width:'70px', height: '800px'}" [class]="'one two'"></div>
+    <div [style]="{width:'80px', height: '900px'}" [class]="'one two'"></div>
+    <div [style]="{width:'90px', height: '1000px'}" [class]="'one two'"></div>
+  </div>
+</ng-template>`;
+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();

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';
 
 `<ng-template>
@@ -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']);
+    ɵɵelementStart(
-      ɵɵstyling();
+        1, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
-      ɵɵelementEnd();
+    ɵɵstyling();
-      ɵɵelementStart(2, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
+    ɵɵelementEnd();
-      ɵɵstyling();
+    ɵɵelementStart(
-      ɵɵelementEnd();
+        2, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
-      ɵɵelementStart(3, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
+    ɵɵstyling();
-      ɵɵstyling();
+    ɵɵelementEnd();
-      ɵɵelementEnd();
+    ɵɵelementStart(
-      ɵɵelementStart(4, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
+        3, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
-      ɵɵstyling();
+    ɵɵstyling();
-      ɵɵelementEnd();
+    ɵɵelementEnd();
-      ɵɵelementStart(5, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
+    ɵɵelementStart(
-      ɵɵstyling();
+        4, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
-      ɵɵelementEnd();
+    ɵɵstyling();
-      ɵɵelementStart(6, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
+    ɵɵelementEnd();
-      ɵɵstyling();
+    ɵɵelementStart(
-      ɵɵelementEnd();
+        5, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
-      ɵɵelementStart(7, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
+    ɵɵstyling();
-      ɵɵstyling();
+    ɵɵelementEnd();
-      ɵɵelementEnd();
+    ɵɵelementStart(
-      ɵɵelementStart(8, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
+        6, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
-      ɵɵstyling();
+    ɵɵstyling();
-      ɵɵelementEnd();
+    ɵɵelementEnd();
-      ɵɵelementStart(9, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
+    ɵɵelementStart(
-      ɵɵstyling();
+        7, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
-      ɵɵelementEnd();
+    ɵɵstyling();
-      ɵɵelementStart(10, 'div', [AttributeMarker.Classes, 'item', AttributeMarker.Styles, 'width', '50px']);
+    ɵɵelementEnd();
-      ɵɵstyling();
+    ɵɵelementStart(
-      ɵɵelementEnd();
+        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) {