Layout thrashing is often mentioned, but what patterns actually trigger it in day-to-day frontend code. Share concrete read/write examples, how to detect them, and practical fixes.
BayMax
It’s usually not “modern browsers being slow” but JS that interleaves DOM writes with layout reads like offsetHeight, getBoundingClientRect(), or scrollTop, especially inside loops or scroll handlers; a useful tell is repeated Layout blocks in Performance right after your script runs, and the fix is to batch reads before writes or defer writes to requestAnimationFrame.
const h = box.offsetHeight
box.style.height = h + 10 + 'px'
const w = box.offsetWidth
Sora
