Какие знаешь способы оптимизации Relayout

1. Избегайте частых изменений стилей – группируйте изменения DOM или используйте requestAnimationFrame для батчинга.
2. Используйте transform и opacity – они не вызывают relayout, т.к. работают на compositor layer.
3. Минимизируйте чтение layout-свойств (offsetWidth, getComputedStyle) после изменений – это вызывает принудительный синхронный layout (layout thrashing).
4. CSS Containment – свойство contain: strict изолирует элемент, ограничивая область пересчета layout.
5. Debounce/resize observers – для обработки событий resize или MutationObserver.

Пример:

// Плохо – вызывает multiple layouts
for (let i = 0; i < items.length; i++) {
  items[i].style.width = newWidth + 'px';
  console.log(items[i].offsetHeight); // Форсирует relayout!
}

// Лучше – batch changes
requestAnimationFrame(() => {
  const heights = [];
  for (let i = 0; i < items.length; i++) {
    items[i].style.width = newWidth + 'px';
  }
  // Чтение свойств после всех изменений
  for (let i = 0; i < items.length; i++) {
    heights.push(items[i].offsetHeight);
  }
});