perf(ivy): convert all node-based benchmark to use a testing harness (#32699)

PR Close #32699

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

@@ -12,6 +12,7 @@ import {ɵɵtext} from '../../../../src/render3/instructions/text';
 import {ɵɵtextInterpolate} from '../../../../src/render3/instructions/text_interpolation';
 import {RenderFlags} from '../../../../src/render3/interfaces/definition';
 import {TVIEW} from '../../../../src/render3/interfaces/view';
+import {createBenchmark} from '../micro_bench';
 import {setupRootViewWithEmbeddedViews} from '../setup';
 
 `<div>
@@ -91,9 +92,16 @@ const rootLView =
     setupRootViewWithEmbeddedViews(TestInterpolationComponent_ng_template_0_Template, 21, 10, 1000);
 const rootTView = rootLView[TVIEW];
 
+// scenario to benchmark
+const interpolationRefresh = createBenchmark('interpolation refresh');
+const refreshTime = interpolationRefresh('refresh');
+
 // run change detection in the update mode
-console.profile('update');
-for (let i = 0; i < 5000; i++) {
+console.profile('interpolation_refresh');
+while (refreshTime()) {
   refreshView(rootLView, rootTView, null, null);
 }
 console.profileEnd();
+
+// report results
+interpolationRefresh.report();

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

@@ -11,6 +11,7 @@ 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 {createBenchmark} from '../micro_bench';
 import {setupRootViewWithEmbeddedViews} from '../setup';
 
 `<ng-template>
@@ -110,9 +111,16 @@ function testTemplate(rf: RenderFlags, ctx: any) {
 const rootLView = setupRootViewWithEmbeddedViews(testTemplate, 11, 10, 1000);
 const rootTView = rootLView[TVIEW];
 
+// scenario to benchmark
+const styleAndClassBindingMapBenchmark = createBenchmark('style and class map binding');
+const refreshTime = styleAndClassBindingMapBenchmark('refresh');
+
 // run change detection in the update mode
-console.profile('update');
-for (let i = 0; i < 5000; i++) {
+console.profile('style_and_class_map_binding_refresh');
+while (refreshTime()) {
   refreshView(rootLView, rootTView, null, null);
 }
 console.profileEnd();
+
+// report results
+styleAndClassBindingMapBenchmark.report();

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

@@ -7,14 +7,22 @@
  */
 import {refreshView} from '../../../../src/render3/instructions/shared';
 import {TVIEW} from '../../../../src/render3/interfaces/view';
+import {createBenchmark} from '../micro_bench';
 import {setupRootViewWithEmbeddedViews} from '../setup';
 
 const rootLView = setupRootViewWithEmbeddedViews(null, 0, 0, 1000);
 const rootTView = rootLView[TVIEW];
 
+// scenario to benchmark
+const noopChangeDetection = createBenchmark('noop change detection');
+const refreshTime = noopChangeDetection('refresh');
+
 // run change detection in the update mode
-console.profile('update');
-for (let i = 0; i < 20000; i++) {
+console.profile('noop_refresh');
+while (refreshTime()) {
   refreshView(rootLView, rootTView, null, null);
 }
-console.profileEnd();
+console.profileEnd();
+
+// report results
+noopChangeDetection.report();

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

@@ -11,6 +11,7 @@ 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';
 
 `<div>
@@ -70,9 +71,16 @@ const rootLView =
     setupRootViewWithEmbeddedViews(TestInterpolationComponent_ng_template_0_Template, 11, 10, 1000);
 const rootTView = rootLView[TVIEW];
 
+// scenario to benchmark
+const propertyBindingRefresh = createBenchmark('property binding refresh');
+const refreshTime = propertyBindingRefresh('refresh');
+
 // run change detection in the update mode
-console.profile('update');
-for (let i = 0; i < 5000; i++) {
+console.profile('property_binding_refresh');
+while (refreshTime()) {
   refreshView(rootLView, rootTView, null, null);
 }
 console.profileEnd();
+
+// report results
+propertyBindingRefresh.report();

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

@@ -12,6 +12,7 @@ import {RenderFlags} from '../../../../src/render3/interfaces/definition';
 import {AttributeMarker} from '../../../../src/render3/interfaces/node';
 import {TVIEW} from '../../../../src/render3/interfaces/view';
 import {ɵɵclassProp, ɵɵstyleProp, ɵɵstyling, ɵɵstylingApply} from '../../../../src/render3/styling_next/instructions';
+import {createBenchmark} from '../micro_bench';
 import {setupRootViewWithEmbeddedViews} from '../setup';
 
 `<ng-template>
@@ -121,9 +122,16 @@ function testTemplate(rf: RenderFlags, ctx: any) {
 const rootLView = setupRootViewWithEmbeddedViews(testTemplate, 11, 10, 1000);
 const rootTView = rootLView[TVIEW];
 
+// scenario to benchmark
+const styleAndClassBindingBenchmark = createBenchmark('style and class binding');
+const refreshTime = styleAndClassBindingBenchmark('refresh');
+
 // run change detection in the update mode
-console.profile('update');
-for (let i = 0; i < 5000; i++) {
+console.profile('style_and_class_binding_refresh');
+while (refreshTime()) {
   refreshView(rootLView, rootTView, null, null);
 }
 console.profileEnd();
+
+// report results
+styleAndClassBindingBenchmark.report();

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

@@ -11,6 +11,7 @@ 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 {createBenchmark} from '../micro_bench';
 import {setupRootViewWithEmbeddedViews} from '../setup';
 
 `<ng-template>
@@ -100,9 +101,16 @@ function testTemplate(rf: RenderFlags, ctx: any) {
 const rootLView = setupRootViewWithEmbeddedViews(testTemplate, 11, 10, 1000);
 const rootTView = rootLView[TVIEW];
 
+// scenario to benchmark
+const styleBindingBenchmark = createBenchmark('style binding');
+const refreshTime = styleBindingBenchmark('refresh');
+
 // run change detection in the update mode
-console.profile('update');
-for (let i = 0; i < 5000; i++) {
+console.profile('style_binding_refresh');
+while (refreshTime()) {
   refreshView(rootLView, rootTView, null, null);
 }
 console.profileEnd();
+
+// report results
+styleBindingBenchmark.report();