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 headed 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 (NVIDIA Corporation, NVIDIA GeForce RTX 3060 Laptop GPU/PCIe/SSE2, OpenGL ES 3.2).

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

500 visible controls

rAF callback FPS

rAF callback FPS for 500 controls

95th-percentile callback interval

95th-percentile callback interval for 500 controls

Layout time per two-batch trial

Layout time per two-batch trial for 500 controls

Style recalculation time per trial

Style recalculation time per trial for 500 controls

Layout passes per trial

Layout passes per trial for 500 controls

Maximum CLS session score

Maximum CLS session score for 500 controls

2,000 visible controls

rAF callback FPS

rAF callback FPS for 2000 controls

95th-percentile callback interval

95th-percentile callback interval for 2000 controls

Layout time per two-batch trial

Layout time per two-batch trial for 2000 controls

Style recalculation time per trial

Style recalculation time per trial for 2000 controls

Layout passes per trial

Layout passes per trial for 2000 controls

Maximum CLS session score

Maximum CLS session score for 2000 controls

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.

TechniqueCountHintTrialsrAF FPSp95 frame interval (ms)Intervals >25ms (%)Layout passesStyle recalculationsLayout (ms)Style (ms)Main thread task (ms)Shift entriesCLSLong animation framesJS heap bytes
Slidebox margins500auto559.916.80.0283036.292.0306.800.0000001604500
Slidebox margins500on559.916.80.0283035.398.5308.100.0000001604476
Slidebox margins2000auto515.6233.660.08954.6216.4913.340.0033251158044
Slidebox margins2000on516.7250.258.38954.6232.2914.030.0024351159404
Left/right edges500auto559.916.80.0283035.6100.0318.500.0000001606120
Left/right edges500on537.950.050.0161821.877.3591.470.0009401620556
Left/right edges2000auto515.4216.980.091055.5190.01101.550.0034651095800
Left/right edges2000on55.8333.580.0020.065.81073.700.000002991376
Transform slide500auto546.150.214.30210.081.6384.900.0000021587388
Transform slide500on547.350.113.30220.069.4392.200.000001964640
Transform slide2000auto54.8633.880.0020.059.51314.900.000002995848
Transform slide2000on53.9650.580.0020.055.31410.900.0000001746604
Grid-track slide500auto558.416.82.7242661.0189.9468.400.000000943428
Grid-track slide500on558.416.82.7232561.2186.9480.600.000000941068
Grid-track slide2000auto512.5233.575.06885.3311.71135.820.0021551108368
Grid-track slide2000on513.0250.270.05781.5297.2931.820.002154966464
Native (no animation)500auto559.916.80.0020.01.915.400.0000001534536
Native (no animation)2000auto559.916.80.0020.07.436.300.0000001770656

Separate traced paint diagnostics · 2,000 controls

One instrumented diagnostic per case, not five primary trials. The graph sums inclusive renderer-main-thread Paint event durations, which can overlap nested work. It is not GPU raster time and must not be added to primary untraced timings.

Separate traced Paint event durations

Diagnostic summaries

Environment and method

{
  "environment": {
    "browser": "156.0.8078.4",
    "headless": false,
    "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 (NVIDIA Corporation, NVIDIA GeForce RTX 3060 Laptop GPU/PCIe/SSE2, OpenGL ES 3.2)",
      "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:57:18.788Z",
  "completedAt": "2026-10-31T09:00:05.804Z"
}

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