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
1 Like
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
1 Like
