Skip to content

CSS Grid Benchmarks#340

Merged
nicoburns merged 15 commits intoDioxusLabs:mainfrom
nicoburns:grid/bench
Jan 27, 2023
Merged

CSS Grid Benchmarks#340
nicoburns merged 15 commits intoDioxusLabs:mainfrom
nicoburns:grid/bench

Conversation

@nicoburns
Copy link
Copy Markdown
Collaborator

@nicoburns nicoburns commented Jan 26, 2023

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

@nicoburns nicoburns mentioned this pull request Jan 26, 2023
87 tasks
@alice-i-cecile
Copy link
Copy Markdown
Collaborator

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
Copy link
Copy Markdown
Collaborator Author

nicoburns commented Jan 27, 2023

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/

@nicoburns nicoburns merged commit 1624a68 into DioxusLabs:main Jan 27, 2023
@nicoburns nicoburns deleted the grid/bench branch January 27, 2023 14:16
@nicoburns nicoburns added this to the 0.3 "CSS Grid" milestone Jan 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants