From f5180b65323c7910364bf6d956669ec2f4cdf7d4 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 16 Jun 2025 12:48:43 +0200 Subject: [PATCH] build: switch benchmarks to standalone (#62096) Updates the `js-web-frameworks` and `largetable` benchmarks to use standalone which helps us benchmark the DOM-only instructions. PR Close #62096 --- .../src/js-web-frameworks/ng2/index.html | 4 +- .../src/js-web-frameworks/ng2/init.ts | 10 ++--- .../src/js-web-frameworks/ng2/main.ts | 14 +++---- .../src/js-web-frameworks/ng2/rows.ts | 11 +---- modules/benchmarks/src/largetable/ng2/init.ts | 9 ++--- modules/benchmarks/src/largetable/ng2/main.ts | 6 +-- .../benchmarks/src/largetable/ng2/table.ts | 40 ++++++++----------- 7 files changed, 34 insertions(+), 60 deletions(-) diff --git a/modules/benchmarks/src/js-web-frameworks/ng2/index.html b/modules/benchmarks/src/js-web-frameworks/ng2/index.html index e06218e30fb..de1c3d0d74c 100644 --- a/modules/benchmarks/src/js-web-frameworks/ng2/index.html +++ b/modules/benchmarks/src/js-web-frameworks/ng2/index.html @@ -8,9 +8,7 @@

Angular - JS Web Frameworks benchmark + JS Web Frameworks benchmark

diff --git a/modules/benchmarks/src/js-web-frameworks/ng2/init.ts b/modules/benchmarks/src/js-web-frameworks/ng2/init.ts index 6d671b22b30..f961f3d3e29 100644 --- a/modules/benchmarks/src/js-web-frameworks/ng2/init.ts +++ b/modules/benchmarks/src/js-web-frameworks/ng2/init.ts @@ -6,11 +6,11 @@ * found in the LICENSE file at https://angular.dev/license */ -import {ApplicationRef, NgModuleRef} from '@angular/core'; +import {ApplicationRef} from '@angular/core'; import {bindAction} from '../../util'; -import {JsWebFrameworksComponent, JsWebFrameworksModule, RowData} from './rows'; +import {JsWebFrameworksComponent, RowData} from './rows'; function _random(max: number) { return Math.round(Math.random() * 1000) % max; @@ -88,9 +88,8 @@ const NOUNS = [ 'keyboard', ]; -export function init(moduleRef: NgModuleRef) { +export function init(appRef: ApplicationRef) { let component: JsWebFrameworksComponent; - let appRef: ApplicationRef; function create1K() { component.data = buildData(1 * 1000); @@ -124,9 +123,6 @@ export function init(moduleRef: NgModuleRef) { appRef.tick(); } - const injector = moduleRef.injector; - appRef = injector.get(ApplicationRef); - component = appRef.components[0].instance; bindAction('#create1KRows', create1K); diff --git a/modules/benchmarks/src/js-web-frameworks/ng2/main.ts b/modules/benchmarks/src/js-web-frameworks/ng2/main.ts index 93e0f113011..3f1342636a3 100644 --- a/modules/benchmarks/src/js-web-frameworks/ng2/main.ts +++ b/modules/benchmarks/src/js-web-frameworks/ng2/main.ts @@ -6,15 +6,13 @@ * found in the LICENSE file at https://angular.dev/license */ -import {enableProdMode} from '@angular/core'; -import {platformBrowser} from '@angular/platform-browser'; +import {enableProdMode, NgZone, ɵNoopNgZone} from '@angular/core'; +import {bootstrapApplication} from '@angular/platform-browser'; import {init} from './init'; -import {JsWebFrameworksModule} from './rows'; +import {JsWebFrameworksComponent} from './rows'; enableProdMode(); -platformBrowser() - .bootstrapModule(JsWebFrameworksModule, { - ngZone: 'noop', - }) - .then(init); +bootstrapApplication(JsWebFrameworksComponent, { + providers: [{provide: NgZone, useClass: ɵNoopNgZone}], +}).then(init, (e) => console.error(e)); diff --git a/modules/benchmarks/src/js-web-frameworks/ng2/rows.ts b/modules/benchmarks/src/js-web-frameworks/ng2/rows.ts index 4f32534b99a..e9a0c61b2ae 100644 --- a/modules/benchmarks/src/js-web-frameworks/ng2/rows.ts +++ b/modules/benchmarks/src/js-web-frameworks/ng2/rows.ts @@ -6,8 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {ApplicationRef, Component, NgModule} from '@angular/core'; -import {BrowserModule} from '@angular/platform-browser'; +import {ApplicationRef, Component} from '@angular/core'; export interface RowData { id: number; @@ -36,7 +35,6 @@ export interface RowData { `, - standalone: false, }) export class JsWebFrameworksComponent { data: Array = []; @@ -60,10 +58,3 @@ export class JsWebFrameworksComponent { this._appRef.tick(); } } - -@NgModule({ - imports: [BrowserModule], - declarations: [JsWebFrameworksComponent], - bootstrap: [JsWebFrameworksComponent], -}) -export class JsWebFrameworksModule {} diff --git a/modules/benchmarks/src/largetable/ng2/init.ts b/modules/benchmarks/src/largetable/ng2/init.ts index 6df6c46bbbc..e9792dbe575 100644 --- a/modules/benchmarks/src/largetable/ng2/init.ts +++ b/modules/benchmarks/src/largetable/ng2/init.ts @@ -6,16 +6,15 @@ * found in the LICENSE file at https://angular.dev/license */ -import {ApplicationRef, NgModuleRef} from '@angular/core'; +import {ApplicationRef} from '@angular/core'; import {bindAction, profile} from '../../util'; import {buildTable, emptyTable, initTableUtils} from '../util'; -import {AppModule, TableComponent} from './table'; +import {TableComponent} from './table'; -export function init(moduleRef: NgModuleRef) { +export function init(appRef: ApplicationRef) { let table: TableComponent; - let appRef: ApplicationRef; function destroyDom() { table.data = emptyTable; @@ -29,8 +28,6 @@ export function init(moduleRef: NgModuleRef) { function noop() {} - const injector = moduleRef.injector; - appRef = injector.get(ApplicationRef); table = appRef.components[0].instance; initTableUtils(); diff --git a/modules/benchmarks/src/largetable/ng2/main.ts b/modules/benchmarks/src/largetable/ng2/main.ts index 35bf847dc41..9c09077dbb3 100644 --- a/modules/benchmarks/src/largetable/ng2/main.ts +++ b/modules/benchmarks/src/largetable/ng2/main.ts @@ -7,10 +7,10 @@ */ import {enableProdMode} from '@angular/core'; -import {platformBrowser} from '@angular/platform-browser'; +import {bootstrapApplication} from '@angular/platform-browser'; import {init} from './init'; -import {AppModule} from './table'; +import {TableComponent} from './table'; enableProdMode(); -platformBrowser().bootstrapModule(AppModule).then(init); +bootstrapApplication(TableComponent).then(init); diff --git a/modules/benchmarks/src/largetable/ng2/table.ts b/modules/benchmarks/src/largetable/ng2/table.ts index bd14c751db4..8b5c8a6f9d5 100644 --- a/modules/benchmarks/src/largetable/ng2/table.ts +++ b/modules/benchmarks/src/largetable/ng2/table.ts @@ -6,46 +6,40 @@ * found in the LICENSE file at https://angular.dev/license */ -import {Component, Input, NgModule} from '@angular/core'; -import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser'; +import {Component, inject, Input} from '@angular/core'; +import {DomSanitizer, SafeStyle} from '@angular/platform-browser'; import {emptyTable, TableCell} from '../util'; -let trustedEmptyColor: SafeStyle; -let trustedGreyColor: SafeStyle; +let trustedEmptyColor: SafeStyle | null = null; +let trustedGreyColor: SafeStyle | null = null; @Component({ selector: 'largetable', template: ` - - - + @for (row of data; track $index) { + + @for (cell of row; track $index) { + + } + + }
- {{ cell.value }} -
{{ cell.value }}
`, - standalone: false, }) export class TableComponent { @Input() data: TableCell[][] = emptyTable; - trackByIndex(index: number, item: any) { - return index; + constructor() { + if (trustedEmptyColor === null) { + const sanitizer = inject(DomSanitizer); + trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('white'); + trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey'); + } } getColor(row: number) { return row % 2 ? trustedEmptyColor : trustedGreyColor; } } - -@NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]}) -export class AppModule { - constructor(sanitizer: DomSanitizer) { - trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('white'); - trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey'); - } -}