Что такое Relayout

Relayout (перекомпоновка) — это процесс пересчета геометрии элементов DOM при изменении их размеров, положения или содержимого, что приводит к повторному вычислению макета страницы. Это часть цикла рендеринга браузера и может быть ресурсоемким, особенно при частых изменениях.

Пример триггеров relayout:

• Изменение ширины/высоты элемента (element.style.width = '200px')
• Добавление/удаление DOM-узлов
• Получение метрик (например, offsetWidth, clientHeight)

Как избежать:

1. Группировать изменения DOM (DocumentFragment, requestAnimationFrame).
2. Использовать CSS-трансформы вместо изменения размеров/положения.
3. Минимизировать чтение метрик после изменений.

// Плохо: вызывает multiple relayouts
for (let i = 0; i < 100; i++) {
  element.style.width = `${i}px`;
}

// Лучше: batch changes
requestAnimationFrame(() => {
  element.style.width = '100px';
});