CSS Grid Benchmarks

[nicoburns]

Objective

Provide a way to measure and track performance of the CSS Grid implementation.

Benchmark results

Unfortunately the actual performance is pretty atrocious.

Some notes:

• We have exponential blowup with respect to depth again. This got much faster (comparable to flex) when I made all the tracks fixed size. So track sizing is unsurprisingly the bottleneck here and I suspect updating caching for grid might fix this.
• We also seem to have a separate quadratic blowup with respect to the number of cells in a single level (this is after accounting for the fact that the grid is 2D) EDIT: The wide benchmarks turned out to not even be measuring the grid algorithm as I had forgotten to set display 🤦

Benchmark	Grid Size	Depth	Node Count	Time
grid/wide	31x31	1	961	731.66 µs
grid/wide	100x100	1	10,000	9.4765 ms
grid/wide	150x150	1	22,500	21.201 ms
grid/wide	200x200	1	40,000	49.511 ms
grid/deep	3x3	3	1,000	9.2241 ms
grid/deep	3x3	4	10,000	539.44 ms
grid/deep	2x2	3	125	1.0307 ms
grid/deep	2x2	4	625	12.238 ms
grid/deep	2x2	5	3125	223.85 ms
grid/deep	2x2	6	15625	3.8296 s
grid/superdeep	1x1	10	10	3.4906 ms
grid/superdeep	1x1	20	10	6.1184 s

[alice-i-cecile]

Yep, unsurprised there's a subtle exponential blow-up. Very happy to have some benchmarks to track this: feel free to merge when you think it's ready.

[nicoburns]

3rd party benchmark https://oczpm.csb.app/

Analysis of browser grid layout perf https://blogs.igalia.com/jfernandez/2015/06/24/performance-on-grid-layout/