Files
OpenFrontIO/tests/perf/client/Shims.ts
T
Evan aa22339f96 Add a main-thread perf harness for the worker → client update pipeline (#4243)
## What

`npm run perf:client` — a headless harness (companion to `npm run
perf:game` from #4228) that measures the **main-thread burst** the
client runs every simulation tick. The sim ticks at 10Hz in a worker;
each tick the main thread synchronously runs deserialization →
`GameView.update()` → `WebGLFrameBuilder.update()` → HUD ticks. On
low-end devices that burst exceeds the 16.7ms frame budget and shows up
as a stutter every 100ms. Before optimizing that path, this gives us
numbers.

Per tick it runs the real pipeline end to end and times three stages:

- **clone** — `structuredClone` of the `GameUpdateViewData` with the
same transfer list `Worker.worker.ts` uses (serialize+deserialize, an
upper bound on the main-thread share of the real `postMessage`)
- **view** — the real client `GameView.update()`, including all
`populateFrame()` derivations
- **builder** — the real `WebGLFrameBuilder.update()` against a no-op GL
stub that counts payload sizes

It reports mean/p50/p95/p99/max per stage, slowest bursts with their
tile counts, payload stats, a filtered V8 CPU profile table, and writes
a `.cpuprofile`. Not covered (browser-only): CPU inside the WebGL view's
`update*()` methods and HUD layer ticks.

Same flags as `perf:game`: `--map --ticks --bots --nations --seed --top
--no-cpu-profile`.

## Determinism

- Prints the sim **Final hash**, which matches the `perf:game`
references on all three standard configs (world/200t/100b →
`5607618202213430`, default → `29309648281599524`, giantworldmap/600t →
`39945089450032050`) — the harness's worker side is faithful.
- Prints a **View hash** (FNV over the tile-state buffer, FrameData
deriveds, and per-player/unit view state) — verified stable across runs.
Client-side optimizations should keep it identical, the same workflow as
the sim hash.

## Baseline (this machine; low-end devices are ~5–20× slower)

Default run (world, 400 bots, 1800 ticks):

| stage | mean | p50 | p95 | p99 | max |
|---|---|---|---|---|---|
| clone (serialize+deserialize) | 1.02ms | 0.96 | 1.53 | 2.11 | 9.15 |
| GameView.update | 0.62ms | 0.58 | 0.93 | 1.25 | 5.09 |
| WebGLFrameBuilder.update | 0.04ms | 0.04 | 0.05 | 0.07 | 0.17 |
| **TOTAL burst** | **1.67ms** | **1.60** | **2.46** | **3.47** |
**10.3** |

giantworldmap/600t: TOTAL mean 2.54ms, p99 5.65ms, max 6.42ms.

Notable: the clone is the largest stage (~60%) — the packed tile/motion
buffers transfer for free, so the cost is structured-cloning the
`updates` object (~278 partial player updates/tick on world, ~508 on
giantworldmap). Inside `view`, the recurring cost is `populateFrame`'s
derivations (`computePlayerStatus`, the O(players²) relation matrix,
alliance clusters); tile apply dominates the land-grab spikes.

## Code changes outside the harness

- `WebGLFrameBuilder`: the `./render/gl` import is now `import type` so
the module loads under Node — a value import pulls `GPURenderer` and its
`.glsl?raw` shader imports. No behavior change (the symbols were only
used in type positions).
- `tests/perf/client/Shims.ts`: an in-memory `localStorage` shim so
`UserSettings`/theme code runs under Node (all settings resolve to
defaults, which is also the deterministic choice).

## Verification

- Sim + view hashes identical on repeat runs.
- `npm test` (1474 tests), `eslint`, `prettier --check`, `tsc --noEmit`
all pass.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-06-12 12:25:54 -07:00

31 lines
970 B
TypeScript

/**
* Browser-global shims for running client code (src/client/view, theme,
* WebGLFrameBuilder) under Node. Import this FIRST — ESM executes imports in
* order, so it must precede any module that touches these globals.
*
* UserSettings reads localStorage lazily; an in-memory store means every
* setting resolves to its default, which is also the deterministic choice.
*/
if (typeof globalThis.localStorage === "undefined") {
const store = new Map<string, string>();
Object.defineProperty(globalThis, "localStorage", {
configurable: true,
value: {
getItem: (key: string) => store.get(key) ?? null,
setItem: (key: string, value: string) => {
store.set(key, String(value));
},
removeItem: (key: string) => {
store.delete(key);
},
clear: () => store.clear(),
key: (i: number) => [...store.keys()][i] ?? null,
get length() {
return store.size;
},
},
});
}
export {};