Single measurement experiment
DOM, Canvas, and Pretext measure the same text once at a fixed width.
- layout
Hypothesis
For a single measurement, Pretext pays enough preparation cost that DOM and Canvas are expected to be faster. This run is meant to harden the browser benchmark pipeline before using it for broader comparisons.
Setup
- Text lengths: 10, 100, 1000, and 5000 characters from a deterministic lorem fixture.
- Width: 600px.
- Font:
16px "Inter". - Line height:
1.5for DOM and Canvas,24pxfor Pretext. - Warmup: 100 calls per cell.
- Timed iterations: 1000 calls per cell.
- Reported values:
p50,p95, andp99, formatted in microseconds.
| strategy | 10 chars | 100 chars | 1000 chars | 5000 chars |
|---|---|---|---|---|
| Pretext prepare | queued | queued | queued | queued |
| DOM | queued | queued | queued | queued |
| Canvas | queued | queued | queued | queued |
| Pretext | queued | queued | queued | queued |
What this measures (and what it doesn’t)
The DOM strategy appends a hidden element to document.body, forces layout with
offsetHeight, then removes the element. Detached fragments are avoided because
they are unrealistically fast for this workload.
The Canvas strategy uses ctx.measureText with a simple greedy word wrap helper.
It does not model hyphenation, CJK line breaking, soft hyphens, bidi behavior, or
browser-specific text shaping details.
The Pretext strategy runs prepare(text, '16px "Inter"') once per text length,
then calls layout(handle, 600, 24) inside the timed loop. The separate
Pretext prepare row reports the per-length preparation cost.
Reading the numbers
Each table cell is one strategy and one text length. The three values are the median, 95th percentile, and 99th percentile of the measured call duration. The numbers are local to the browser tab, machine load, and font state for this run.