drawSVGBench

A full-screen <svg> of <line> elements driven by one Float64Array, where every 4 floats are a line (x1 y1 x2 y2). Each framework page renders the same data with the same styling options and is timed by the same harness code; only the rendering layer differs.

Source, results and notes: github.com/goswinr/drawSVGBench

Run a comparison

Line counts
Frameworks
How it is measured
  • Create: empty SVG → N lines. Update: a new random array of the same size; existing <line> attributes are rewritten in place. Recolor: the per-line stroke switches between hue-by-angle and hue-by-index. Clear: N lines → none.
  • Script is the synchronous framework call (reactive graph + DOM mutation), timed with performance.now(). Solid and Fable.Ripple flush synchronously; Ripple-TS is wrapped in flushSync. The vanilla JS page writes the DOM directly.
  • Render is the browser's main-thread style, layout and paint for the next frame: from the frame's requestAnimationFrame callback to the first task after it. Waiting for vsync and off-thread rasterization are not counted.
  • New arrays are generated before the timer starts. Every sample starts from a settled frame. After each op the DOM is checked: line count, exact coordinates, stroke and stroke width on a few lines.
  • Each operation and line count has a wall-clock budget. If a framework goes past it (setup included), the rest of the warmup is skipped and measuring stops after 3 samples, or after 1 once three budgets are spent. Those cells are marked *.
  • Each framework runs in its own full-screen iframe, one after another. Run the production build (npm run bench); dev builds include framework debug code.