129
reflow and repaint
Reading layout in a loop forces the browser to recalculate. Write styles, then read once.
What is reflow and repaint?
Reflow is recomputing geometry. Repaint is recomputing pixels. Interleaving reads (`offsetHeight`) and writes (`style.width`) in a loop thrashes layout. Transforms and opacity can stay on the compositor. Top, left, and width often cannot.
Why does reflow and repaint matter when vibe coding?
Models animate `left` and measure height inside a scroll handler. The main thread drops frames. Name the thrash or they will add more listeners.
How do you do reflow and repaint?
Batch reads, then batch writes. Animate transform and opacity. Do not bind scroll to layout reads without a frame budget. Virtualize long lists instead of measuring every row every time.
How do you ask a model for reflow and repaint?
Do not interleave layout reads and writes. Animate transform/opacity, not top/left/width. Do not read offsetHeight inside the loop that sets sizes.
What goes wrong with reflow and repaint?
“Optimizing” by caching a measurement that is stale after a font load. Measure after layout, once.