Episode 10 game · Vayu · Air
Calm the Thrashing Golem
One click on Kai’s gallery and the page freezes. Feel the golem wake as every offsetWidth read forces a new layout, fix the loop so it reads first and writes after, then prove it in a real browser frame test.
Purple = a layout the browser had to run in the middle of your script.
1 · Feel the freeze
This gallery is real DOM. Kai’s loop measures each card with offsetWidth, then sets its height. Click and count the layouts.
2 · Read first, write after
Same work, better order. Fix Kai’s loop, then find the version that needs no measuring at all.
3 · The frame test
500 real cards, one click, your code. Every card must end up 4:3, with at most one layout and no thrashing.
New seal earned
The golem crumbled
Acharya’s Rule #10Read everything first, then write. A read after a write forces a new layout.
offsetWidth after a style change makes the browser lay out the page right now.
Collect every measurement first, then apply every change. Layout runs once.
aspect-ratio: 4 / 3 sizes the cards with zero JavaScript reads.