A million rows, timed on your machine

You are evaluating a grid because somebody handed you a screen that has to show a settlement ledger, and the ledger has a million lines in it. So you read the performance page, and the performance page has a number on it, and the number is meaningless, because you have no idea what machine produced it, what the columns were, whether totals were on, or how many of those rows were ever painted.

The grid above is holding a million ledger lines. There is a figure above it and a line of figures below it, and every one of them was measured in the browser you are reading this in, a few seconds ago. The grid above will tell you what it does on yours.

Why our number would be worthless to you

A grid benchmark is mostly a benchmark of the machine. The same configuration on a workstation with a fast single core and a laptop that has been in a bag with four hundred tabs open will differ by a factor most people would not believe if we printed it. Quoting the good one is the industry habit and it is close to useless, because the machine that matters is the worst one your users have.

There is a second reason, less flattering to benchmarks generally. A number published by a vendor is a number the vendor chose, and the way you choose a good one is by choosing the configuration that produces it: five columns of integers, no totals, no filters, no formatting, no pinned region. Real screens have currency formats, a set filter on four columns, a sum in the footer and a column pinned to the left, and every one of those costs something.

So the demo carries the awkward version. Eleven columns, two of them summed across the whole million, currency formatting on both, a date column, a boolean, set filters on four fields and the line number pinned left. Sort by amount and watch the repaint figure move.

What the numbers are counting, precisely

The line above the grid is the whole build. The clock starts immediately before the grid is created and stops on the second animation frame after that, which is the earliest moment there is definitely something on screen. Construction, columnarisation, the totals across both money columns and the first paint are all inside it.

The rows are generated before that clock starts, and that is the one thing we have excluded. Minting a million demo objects is our cost, not the grid’s. Folding it in would make the grid look slower than it is while making the demo look more impressive than it is, which is not a trade worth making on a page whose only argument is that the numbers are real.

The line below the grid is the grid reporting on itself. The megabyte figure is the store saying what it actually holds. Above five thousand rows the grid stops keeping your row objects and columnarises: numbers become typed arrays, booleans become a bitset, and repeated strings like the merchant and the region become dictionaries of small integers pointing at one copy of each label. That is why a million rows of eleven columns fits in tens of megabytes rather than hundreds, and it is why sorting reads a contiguous array instead of chasing a million pointers around the heap.

Beside it is the number of rows the grid has in the DOM, which will be a few dozen: the ones in the scroll window plus a little overscan. That is the reason the million is affordable at all. The repaint counter climbs as you scroll, because scrolling is repainting, and the figure next to it is how long the last repaint took and what caused it.

The part that is unusual

Plenty of grids will tell you a million rows is not a client-side problem and route you to a server-side row model, where every sort is a round trip and every filter is an endpoint somebody has to write. That is a real answer for a hundred million rows. For one million it is a lot of backend work to avoid a data structure.

The rarer thing is not the speed. It is that the page you are reading measures itself, in front of you, on hardware we have no control over, and prints whatever it gets. A demo that can only be trusted when it is fast is a demo we would have had to fake on a bad machine, and we would rather ship one that tells you the truth on yours.

Whatever figure your laptop prints is the figure your users will get, which is the only number worth planning against.

Build against your own million rows on localhost, free and without a key, or see what the store is doing underneath.