Performance

This page states what the view and server benchmarks measure and what their results mean for an app. The figures come from one machine (AMD Ryzen 9 9900X, Windows 11) at one point in the code's development; rerun the benchmarks before relying on a number. The raw data and method are in the repository's research notes: server HTML and hydration and its result files.

The fixtures

Both are in ServerFixtures.fs.

Server render on .NET

BenchmarkDotNet, Release, one Server.render of the page per operation:

• A render's fixed cost is its graph and request root: about 1 µs.
• Each row costs about 0.3 µs and 1.8 KB, of which about 0.8 KB is the page's own characters. The rest is the row's owner and setup.
• At 10,000 rows nearly every render triggers a Gen2 collection; the 2 MB page dominates.

Server render under Node

The same fixtures compiled with Fable in Release, against Solid 2 (2.0.0-rc.14) renderToString of the same markup, medians in one session:

Ranvier renders a one-component page faster, and Solid 2 renders long pages 1.6 to 2.7 times faster: Ranvier pays for a per-instance owner on every row, about 0.6 to 0.9 µs per row under Node.

Page size. Ranvier writes its markers once per page and once per region, where Solid 2 writes a hydration key on every row. Ranvier's page is larger at one component (141 against 122 bytes) and smaller from 16 rows on (about 204 against 214 bytes per keyed row).

Hydration in Chromium

Hydration.hydrate of the server's own HTML against Mounting.mount of the same page into an empty host, and against Solid 2's hydrate, medians over 180 samples:

• Hydrating costs the same as mounting at one component and less from 16 rows on: a hydrated row walks the server's nodes and compares values, where a mounted row clones, inserts and writes attributes.
• Retained heap per row is within 1.1 % for hydrate and mount from 128 rows on (about 810 bytes per keyed row).
• Lenient hydration of matching HTML is within 2 % of Strict.

Sugar

The sugar mounts the same owners, effects, listeners and DOM writes as the explicit form for every style except Component.ofClass, which builds one two-element array per instance setup under Fable. Unused sugar adds 0 bytes to a bundle; the bundle cost of each style is in the view sugar README's Costs section.

Guidance

• Per-row cost is per-instance cost. Every row, arm and child component is an instance with an owner, a setup and a render effect. A row that needs no state of its own still pays for one; keep row templates flat and share definitions.
• One render effect per instance. All of an instance's bindings re-run together when any of their dependencies changes. A binding that changes far more often than its siblings is a candidate for t.isolated (see Templates and bindings).
• Hydrate long pages. Hydration took 0.91 of a mount's time at 128 component rows and 0.63 at 10,000 keyed rows, and the same time at one component.
• Settle data before rendering when the server should send content rather than a pending view.

Running the benchmarks

From the repository root, for the .NET server render:

dotnet run -c Release --project experiments/Ranvier.View.Checks/ServerBench/ServerBench.fsproj -- --filter '*'
dotnet run -c Release --project experiments/Ranvier.View.Checks/ServerBench/ServerBench.fsproj -- --bytes

--bytes prints one JSON object per fixture with its page size in bytes and bytes per row. From examples/Fable.Ranvier.Playground, after npm ci:

node benchmarks/frameworks/server-render.mjs --build
node benchmarks/frameworks/hydration-bench.mjs --build

Run one benchmark at a time on an otherwise idle machine; the Chromium runs need Playwright's Chromium (npx playwright install chromium).