500 / 2,000-switch stress comparison

Five technique scenes, including a native unanimated reference. All controls change state together, twice per trial. Same 1920×1440 viewport and 200ms motion; five trials per case.

These graphs do not rank whole libraries. The edge, transform, and grid scenes are normalized illustrations. Transform/grid do not reproduce Slidebox's deformation. FPS means rAF callback cadence, not actual GPU-presented frames. This is a local headless Chromium pilot, not a device-wide or cross-browser performance claim.

Read the online alternatives and source links · Download raw JSON · Explore the live scenes · Earlier software-rendered headless pilot

Read timing and work together: less layout time in a low-FPS case can mean fewer animation frames ran, not that the implementation became more efficient. Zero layout counters also do not guarantee smooth compositor or GPU output. The browser reported: ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader driver).

Browser default: will-change autoProperty-specific will-change

500 visible controls

rAF callback FPS

95th-percentile callback interval

Layout time per two-batch trial

Style recalculation time per trial

Layout passes per trial

Maximum CLS session score

2,000 visible controls

rAF callback FPS

95th-percentile callback interval

Layout time per two-batch trial

Style recalculation time per trial

Layout passes per trial

Maximum CLS session score

Detailed results

Each cell is the median of independent trials. Zero CLS does not mean zero layout work. These synthetic batch toggles are not real-user INP data. JS heap excludes GPU and compositor memory.

Technique	Count	Hint	Trials	rAF FPS	p95 frame interval (ms)	Intervals >25ms (%)	Layout passes	Style recalculations	Layout (ms)	Style (ms)	Main thread task (ms)	Shift entries	CLS	Long animation frames	JS heap bytes
Slidebox margins	500	auto	5	58.4	16.8	2.7	28	30	36.2	124.0	361.5	0	0.00000	0	1604812
Slidebox margins	500	on	5	56.9	33.2	5.6	28	30	34.1	120.7	345.3	0	0.00000	0	1604552
Slidebox margins	2000	auto	5	16.7	233.3	58.3	8	10	58.2	233.4	1078.6	4	0.00269	5	1254308
Slidebox margins	2000	on	5	12.0	266.7	63.6	7	8	47.4	232.3	926.3	3	0.00225	4	1157644
Left/right edges	500	auto	5	58.4	16.8	2.7	28	30	37.2	108.2	342.0	0	0.00000	0	1606608
Left/right edges	500	on	5	41.6	33.4	40.7	20	22	29.0	95.9	530.3	8	0.00080	0	1621436
Left/right edges	2000	auto	5	16.2	233.4	61.5	7	8	50.4	172.6	913.9	2	0.00248	5	1158148
Left/right edges	2000	on	5	5.8	383.3	80.0	0	2	0.0	86.0	1249.2	0	0.00000	2	1002952
Transform slide	500	auto	5	55.3	33.3	8.6	0	27	0.0	103.9	418.3	0	0.00000	0	1580208
Transform slide	500	on	5	50.5	33.4	12.5	0	27	0.0	102.4	487.0	0	0.00000	1	976696
Transform slide	2000	auto	5	4.4	566.6	83.3	0	2	0.0	63.4	1207.3	0	0.00000	2	995848
Transform slide	2000	on	5	3.9	800.0	75.0	0	2	0.0	69.9	1738.3	0	0.00000	0	990788
Grid-track slide	500	auto	5	56.8	33.3	5.6	24	26	65.6	201.5	499.6	0	0.00000	0	971104
Grid-track slide	500	on	5	56.8	33.3	5.6	23	25	57.0	200.4	476.7	1	0.00007	0	973496
Grid-track slide	2000	auto	5	10.8	266.6	62.5	5	7	84.7	326.8	1037.1	2	0.00224	5	1107556
Grid-track slide	2000	on	5	10.5	249.9	58.3	3	5	55.8	293.8	940.4	1	0.00214	4	1106384
Native (no animation)	500	auto	5	60.0	16.7	0.0	0	2	0.0	4.6	32.6	0	0.00000	0	1534572
Native (no animation)	2000	auto	5	60.0	16.8	0.0	0	2	0.0	21.4	65.7	0	0.00000	0	1770664

Environment and method

{
  "environment": {
    "browser": "156.0.8078.4",
    "headless": true,
    "node": "v26.12.0",
    "platform": "linux",
    "architecture": "x64",
    "kernel": "Linux 7.2.8-9-omarchy",
    "cpu": "11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz",
    "release": "1.3.0",
    "cssSha256": "16ba4272fa96b7a72649cacefc977c6580f648827bbcefd3be54a1373cf4b703",
    "graphics": {
      "devicePixelRatio": 1,
      "hardwareConcurrency": 16,
      "renderer": "ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader driver)",
      "supportedObservers": [
        "element",
        "event",
        "first-input",
        "interaction-contentful-paint",
        "largest-contentful-paint",
        "layout-shift",
        "long-animation-frame",
        "longtask",
        "mark",
        "measure",
        "navigation",
        "paint",
        "resource",
        "soft-navigation",
        "visibility-state"
      ]
    }
  },
  "method": {
    "viewport": {
      "width": 1920,
      "height": 1440
    },
    "trials": 5,
    "togglesPerTrial": 2,
    "counts": [
      500,
      2000
    ],
    "animationMs": 200,
    "tailDelayMs": 20,
    "sample": "rAF intervals overlapping the first 300ms after each actual batch start",
    "fps": "1000 / mean sampled rAF interval; not a presented-frame/GPU FPS counter",
    "longIntervalThresholdMs": 25,
    "willChange": "Property-specific hints, configured before warmup; not promotion guarantees",
    "normalization": "Independent technique illustrations; not whole-library/package benchmarks. Same dimensions/colors/duration, transform/grid do not deform.",
    "trace": "Primary trials run without DevTools tracing, screenshots, or video recording. CDP Performance counters sampled at trial boundaries."
  },
  "startedAt": "2026-10-31T08:45:44.066Z",
  "completedAt": "2026-10-31T08:48:34.750Z"
}

Harness source: primary runner · diagnostic trace collector · HTML/CSS scene.