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

Reflow (перерасчет макета) — это дорогая операция, которая может замедлить производительность. Вот как его минимизировать:

1. Избегайте изменения стилей по одному — группируйте изменения через classList или requestAnimationFrame:

// Плохо
el.style.width = '100px';
el.style.height = '100px';

// Хорошо
el.classList.add('resized');

2. **Используйте `transform` и `opacity`** — они не вызывают reflow, так как работают в композитном слое.

3. **Кешируйте значения DOM** — если нужно много читать/писать, сначала прочитайте все значения, затем записывайте:
```js
const width = el.offsetWidth; // Чтение
el.style.width = width + 10 + 'px'; // Запись

4. Избегайте табличных布局ов — они вызывают reflow при любом изменении.

5. Используйте documentFragment для массового добавления элементов в DOM.

6. Применяйте position: absolute/fixed для анимируемых элементов, чтобы вывести их из общего потока.