Performance & compatibility

Measuring speed and the size of the fallback

Mojikumi is built to do less work as browser support grows. Alongside processing time, the number of elements the fallback adds and the cost of setting the text again are tracked continuously.

Current statusMeasured on Chromium

Where the browser has the standard properties, a 10,000 character article gains exactly one element. That one is the injected style element; nothing is added to the text itself. Zero generated elements means standard CSS took all of the typography, which is what the design was for. Where the properties are missing the fallback runs and the first pass costs six to nine times as much. Firefox and WebKit are not measured yet, so the full column below stands in for them.

Check it in the Playground

Results

What the measurements say

Processing cost

Chromium 148.0.7778.96, 1280px wide, the system serif, median of seven runs. auto is the path a reader on this browser actually gets; full forces the fallback instead of using the native properties, standing in for a browser without CSS Text Level 4.

Content	Path	First pass	Re-evaluation	Added DOM	Generated	Heap
1k characters	auto	2.6ms	0.2ms	1	0	74KB
1k characters	full	15.2ms	5.0ms	136	135	197KB
10k characters	auto	5.5ms	0.2ms	1	0	88KB
10k characters	full	45.6ms	140.5ms	1,243	1,242	250KB
10 articles	auto	7.4ms	0.3ms	1	0	120KB
10 articles	full	48.9ms	148.5ms	1,351	1,350	288KB

Layout shift

Same browser, against a bundle served with a 40ms delay, summing layout-shift entries. Eight paragraphs and forty gave the same result. Measured earlier on Chromium 141, the tag at the end of the body cost 0.033 on a phone. On 148 the untagged page already breaks its lines the way Mojikumi does, so the difference is gone.

Placement	Desktop 1280px	Mobile 390px
Not pasted	0	0
In the head	0	0
End of the body	0	0

Metrics

What gets measured

First pass: Time to analyze a body of text and finish placing the spacing
Re-evaluation: Time to set the text again after a resize or once a font loads
Added DOM: How many elements the fallback introduces. The fewer, the more standard CSS already covers
Memory: Heap usage across long texts and several articles open at once

Matrix

The environments we hold steady

Chromium: 148.0.7778.96 / macOS. Measured
Firefox: Not measured. One of the places the fallback really runs
WebKit: Not measured. It has no text-spacing-trim, so the full column becomes a real reading
Content: Three shapes: 1k characters, 10k characters, 10 articles

Method

Only results you can reproduce

The measurement code is scripts/measure-cost.mjs and scripts/measure-shift.mjs in the repository, and BENCHMARKS.md carries the conditions and how to read them. npm run measure:cost and npm run measure:shift take you through the same steps. Numbers depend on the machine, so read the difference between conditions rather than any absolute value. Both measurements fail when an assumption of the design breaks: fallback markup on a browser that has the properties, and a shift from a tag in the head.