# Benchmark harness > Measure grid time-to-first-paint at every (row count × column count) > you care about. Run on your branch, your machine, your data shape. > Use the output to track regressions and to justify "this dataset > needs server-side pagination". ## When You're answering: - "How slow does this get at 100k × 50?" - "Did my refactor regress paint time?" - "At what dataset size should I cut over to server-side pagination?" The same matrix runs in CI as a perf gate, and locally before a PR. ## The harness The pattern: a tiny `` mounted in an off-screen probe div, wrapped in `performance.now()` brackets. The probe unmounts between measurements so each cell starts from a clean state. ```svelte {#each COL_SIZES as c (c)}{/each} {#each matrix as row, rIdx (rIdx)} {#each row as cell, cIdx (cIdx)} {/each} {/each}
{c} cols
{ROW_SIZES[rIdx]?.toLocaleString()} rows
{#if probe} {/if}
``` ## What the timing actually captures - **`t0` is recorded JUST BEFORE** `probe = {...}` triggers a Svelte re-render. Data allocation happened before `t0`, on purpose. - **`t1` is recorded AFTER one rAF.** The browser fires rAF callbacks right before the paint, so by the time `t1` runs, the new grid is mounted and its first frame is on screen. - The number is **time to first paint with this dataset mounted**, NOT time to first interaction. Hovering and clicking happen on subsequent frames; those are virtually free if the grid virtualises. The off-screen probe has `visibility: hidden` but real width / height so the browser still computes layout - paint cost is real. ## Reading the matrix Suggested thresholds for an internal "is this still good?" gauge: | Size | Healthy | Server-side recommended above | | --------- | -------------- | ----------------------------- | | 100×5 | < 16 ms | - | | 1k×10 | < 50 ms | - | | 10k×20 | < 100 ms | - | | 50k×20 | < 250 ms | dataset > 50k | | 100k×50 | < 1 s | absolutely yes | If a "healthy" cell jumps red between branches, you regressed something - bisect with a smaller matrix. ## Run in CI The same harness runs headless in Playwright. Mount the matrix page at whatever route you put it on, click "Run all", read the cells, fail the job if any cell exceeds the threshold. Substitute your own route below - `/dev/stress-matrix` is a placeholder, not a route this package ships: ```ts test('grid time-to-first-paint regression gate', async ({ page }) => { await page.goto('/dev/stress-matrix') // your route, wherever you mounted the matrix await page.getByRole('button', { name: /Run all/ }).click() await page.waitForFunction(() => !document.querySelector('button[disabled]')) const cells = await page.locator('td button').allTextContents() // Smoke-check: every cell now has a number, none are placeholders. expect(cells.every((c) => /\d/.test(c))).toBe(true) // Project-specific gates here: // expect(parseFloat(cells[0])).toBeLessThan(20) // ... }) ``` ## Demo Two shipped demos already instrument themselves with `performance.now()` and make reasonable targets to point a harness at: > Live demo: 100k rows × 100 columns - https://svgrid.com/demos/06-large-dataset/ `06-large-dataset` builds up to 100,000 rows x 95 columns and prints its own mount time. `78-million-rows` goes to 1,000,000 rows, chunking the build at 50,000 per animation frame; it is the one driven by `tests/e2e/million-rows-scroll.spec.ts`. ## Timing a render The number worth measuring is the one your users feel: how long from handing the grid new rows to the browser painting them. `requestAnimationFrame` after the assignment brackets exactly that. ```svelte

{last}

``` ## See also - [Profiling with a FPS HUD](https://svgrid.com/docs/recipes/profiling-with-fps-hud/) - the matching live tool - [Bundle size reference](https://svgrid.com/docs/help/bundle-size/) - the per-feature cost - [Million rows recipe](https://svgrid.com/docs/recipes/million-rows/) - the engineering for very large grids --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/recipes/benchmark-harness/ . All docs: https://svgrid.com/llms.txt