kamilmielnik / scrabble-solver

Free, open-source, cross-platform, and multi-language analysis tool for Scrabble, Super Scrabble & Literaki. Quickly find top scoring words using given board & tiles. Available in English, French, German, Persian, Polish, Romanian, Spanish & Turkish.
https://scrabble-solver.org
Other
94 stars 20 forks source link

Optimize DOM nodes count #271

Closed kamilmielnik closed 1 year ago

kamilmielnik commented 1 year ago

31 to go

image

kamilmielnik commented 1 year ago

SVGs could be served with next/image, that should help with 12 nodes

kamilmielnik commented 1 year ago

Removing Button's .content can save 9 nodes

kamilmielnik commented 1 year ago

PlainTiles rendered from EmptyState have 24 nested nodes in English

kamilmielnik commented 1 year ago

Nav's separator occurs 3 times but could be done with pseudoelements

kamilmielnik commented 1 year ago

7 nodes can be saved by removing .content in Results header buttons

kamilmielnik commented 1 year ago

Cell could be merged with Tile for potentially 225 nodes saved

kamilmielnik commented 1 year ago

Board could use display: grid and save 15 nodes (rows)

Edit: done

kamilmielnik commented 1 year ago

Tile could be merged with its input for potentially 225 + 7 nodes saved

Edit: extracted to https://github.com/kamilmielnik/scrabble-solver/issues/276

kamilmielnik commented 1 year ago

Cells & rows could be replaced with a single SVG (per game type) in the background for potentially 225 + 15 nodes saved

kamilmielnik commented 1 year ago

Cells & rows could be replaced with a single SVG (per game type) in the background for potentially 225 + 15 nodes saved

This is so fun I'm going to try it. Render the SVG board with React to string, then base64 encode it and pass it to <img src= :man_shrugging: