Layout

Layout вычисляет геометрию элементов из style, content, шрифтов, размера viewport, writing mode и ограничений. Чтение offsetWidth или getBoundingClientRect может синхронно завершить отложенные style и layout. В ответах про производительность — батч reads до writes и отказ от циклов, зависящих от layout.

					// Плохо: чередование read/write — sync layout на каждый элемент
for (const row of rows) {
  row.style.height = row.offsetHeight + 10 + 'px';
}

// Лучше: сначала все read, потом все write
const heights = rows.map((row) => row.offsetHeight + 10);
rows.forEach((row, i) => { row.style.height = heights[i] + 'px'; });
				

requestAnimationFrame объединяет визуальные обновления в следующий кадр, но не убирает лишний layout.

На интервью: найдите forced reflow и давление на frame budget в медленном resize или scroll.

Типовые ошибки: один forced layout допустим; опасен read-write цикл по многим узлам.

Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.

Чеклист:

• Батч reads, затем writes.
• Не измеряйте внутри плотных циклов.
• ResizeObserver вместо шторма window resize.
• Профилируйте layout в Performance.