skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

build: switch benchmarks to standalone (#62096)

Browse Source 
Updates the `js-web-frameworks` and `largetable` benchmarks to use standalone which helps us benchmark the DOM-only instructions.

PR Close #62096
This commit is contained in:
Kristiyan Kostadinov
2025-06-16 12:48:43 +02:00
parent 9974af56ec
commit f5180b6532
7 changed files with 34 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/benchmarks/src/js-web-frameworks/ng2/index.html
+1 -3
View File
@@ -8,9 +8,7 @@
<body>
<h2>
Angular
<a href="https://www.stefankrause.net/wp/?p=504" target="_blank"
>JS Web Frameworks benchmark</a
>
<a href="https://www.stefankrause.net/wp/?p=504" target="_blank">JS Web Frameworks benchmark</a>
</h2>
<p>
<button id="create1KRows">create 1K rows</button>
modules/benchmarks/src/js-web-frameworks/ng2/init.ts
+3 -7
View File
@@ -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<JsWebFrameworksModule>) {
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<JsWebFrameworksModule>) {
appRef.tick();
}
const injector = moduleRef.injector;
appRef = injector.get(ApplicationRef);
component = appRef.components[0].instance;
bindAction('#create1KRows', create1K);
modules/benchmarks/src/js-web-frameworks/ng2/main.ts
+6 -8
View File
@@ -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));
modules/benchmarks/src/js-web-frameworks/ng2/rows.ts
+1 -10
View File
@@ -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 {
</tbody>
</table>
`,
standalone: false,
})
export class JsWebFrameworksComponent {
data: Array<RowData> = [];
@@ -60,10 +58,3 @@ export class JsWebFrameworksComponent {
this._appRef.tick();
}
}
@NgModule({
imports: [BrowserModule],
declarations: [JsWebFrameworksComponent],
bootstrap: [JsWebFrameworksComponent],
})
export class JsWebFrameworksModule {}
modules/benchmarks/src/largetable/ng2/init.ts
+3 -6
View File
@@ -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<AppModule>) {
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<AppModule>) {
function noop() {}
const injector = moduleRef.injector;
appRef = injector.get(ApplicationRef);
table = appRef.components[0].instance;
initTableUtils();
modules/benchmarks/src/largetable/ng2/main.ts
+3 -3
View File
@@ -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);
modules/benchmarks/src/largetable/ng2/table.ts
+17 -23
View File
@@ -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: `<table>
<tbody>
<tr *ngFor="let row of data; trackBy: trackByIndex">
<td
*ngFor="let cell of row; trackBy: trackByIndex"
[style.backgroundColor]="getColor(cell.row)"
>
{{ cell.value }}
</td>
</tr>
@for (row of data; track $index) {
<tr>
@for (cell of row; track $index) {
<td [style.backgroundColor]="getColor(cell.row)">{{ cell.value }}</td>
}
</tr>
}
</tbody>
</table>`,
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');
}
}