mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
fb7a10fb18
Corrected typos in modules/ssr-benchmarks/README.md: mesure→measure, Struture→Structure, render→renders, benckmark→benchmark, capitalized DevTools, and clarified the flame chart instruction.
(cherry picked from commit 13c198ae63)
60 lines
3.7 KiB
Markdown
60 lines
3.7 KiB
Markdown
## Intro
|
|
|
|
This small benchmark suite is dedicated to measure & describe how compute time is spent when rendering an application like in SSR.
|
|
|
|
## Structure
|
|
|
|
- `./main.ts` is the entry point to run the benchmark
|
|
- `./src` contains a sample app that exports a `render` function.
|
|
- This app renders a table of variable size, which depends on data (`initData()`)
|
|
- This app is then rendered X numbers of times
|
|
|
|
- Individual function calls are measured with `startMeasuring()`/`stopMeasuring()` from the core package.
|
|
- If you add a new measure, make sure to add it also to the `levels` map for it to be represented correctly in the result
|
|
|
|
## Build & run
|
|
|
|
`pnpm bazel run //modules/ssr-benchmarks:run`
|
|
|
|
### Running the benchmark in a browser environment
|
|
|
|
`pnpm bazel run //modules/ssr-benchmarks:run_browser`
|
|
|
|
This bazel target will build the benchmark, start a http-server with a html that will load the benchmark script.
|
|
The benchmark script with this target will have DOM Emulation disabled.
|
|
The result will be visible in the DevTools console.
|
|
|
|
Note: Due to the CLI adding some polyfills, @angular/build is patched to disable DOM emulation and running server code inside a browser:
|
|
|
|
1. removing an import from `node:module` in `polyfills.server.mjs` (with `tail ...`)
|
|
2. removing the import of `platform-server/init`.
|
|
|
|
To create a usable flame chart, prepare a narrowed run (like `benchmarkRun(10000, 20);`).
|
|
Then in the performance tab of the devtools, trigger "Record & Reload" to generate a profile.
|
|
|
|
### Deopt Explorer
|
|
|
|
A target is dedicated to generate a v8 log that can be fed to the [Deopt Explorer extension](https://github.com/microsoft/deoptexplorer-vscode).
|
|
|
|
1. Run `pnpm bazel run //modules/ssr-benchmarks:run_deopt`,
|
|
2. open the project generated at the path after `Successfully ran all commands in test directory:`,
|
|
3. open the logfile in the extension
|
|
|
|
## Result example
|
|
|
|
=== table with 10000 rows, with 1000 renders ===
|
|
┌─────────┬──────────────────────────────────────┬──────────┬──────────┬────────────┬───────────┐
|
|
│ (index) │ name │ min │ average │ percentage │ max │
|
|
├─────────┼──────────────────────────────────────┼──────────┼──────────┼────────────┼───────────┤
|
|
│ 0 │ ' renderApplication ' │ '77.0ms' │ '86.4ms' │ '100.0%' │ '259.2ms' │
|
|
│ 1 │ ' └ createServerPlatform ' │ '0.0ms' │ '0.1ms' │ '0.1%' │ '3.7ms' │
|
|
│ 2 │ ' └ bootstrap ' │ '35.9ms' │ '42.6ms' │ '49.3%' │ '138.4ms' │
|
|
│ 3 │ ' └ \_render ' │ '39.7ms' │ '43.8ms' │ '50.7%' │ '124.9ms' │
|
|
│ 4 │ ' └ whenStable ' │ '0.0ms' │ '0.0ms' │ '0.0%' │ '0.0ms' │
|
|
│ 5 │ ' └ prepareForHydration ' │ '13.1ms' │ '14.8ms' │ '17.1%' │ '53.4ms' │
|
|
│ 6 │ ' └ insertEventRecordScript ' │ '0.0ms' │ '0.0ms' │ '0.0%' │ '0.0ms' │
|
|
│ 7 │ ' └ serializeTransferStateFactory' │ '0.0ms' │ '0.0ms' │ '0.0%' │ '0.1ms' │
|
|
│ 8 │ ' └ renderToString ' │ '7.3ms' │ '8.9ms' │ '10.3%' │ '41.8ms' │
|
|
└─────────┴──────────────────────────────────────┴──────────┴──────────┴────────────┴───────────┘
|
|
|
|
Note: The max measure is often an outlier of the first few measures, probably before the JIT optimisation happens
|