Paint profiling clean; no layout storms

Layout thrashing occurs when JavaScript alternates between DOM reads (which force the browser to recalculate layout) and DOM writes within the same synchronous block. A loop that reads el.offsetHeight then writes el.style.height for 50 elements triggers 50 layout recalculations instead of one. ISO 25010:2011 time-behaviour measures the cost; the user-visible outcome is continuous paint flashing and dropped frames during any interaction that touches DOM geometry — typically resizing, drag, and scroll handlers.

Separate all DOM reads from DOM writes by batching writes into a requestAnimationFrame callback. Read geometry values before the frame, apply changes inside the callback.

// components/resize-handler.ts — avoid layout thrashing
function resizeElements(elements: HTMLElement[]) {
  // Phase 1: read all geometry (single layout pass)
  const heights = elements.map((el) => el.offsetHeight)

  // Phase 2: write all geometry in next frame (single repaint)
  requestAnimationFrame(() => {
    elements.forEach((el, i) => {
      el.style.height = heights[i] + 10 + 'px'
    })
  })
}