Какие применял способы оптимизации Relayout

1. Batch DOM changes – группирую изменения DOM, используя requestAnimationFrame или DocumentFragment:

const fragment = document.createDocumentFragment();
items.forEach(item => {
  const el = document.createElement('div');
  fragment.appendChild(el);
});
container.appendChild(fragment);

2. CSS transform вместо top/left – анимирую через transform, что не вызывает relayout:

.animated {
  transform: translateX(100px); /* лучше чем left: 100px */
}

3. _Избегаю чтения layout свойств (offset, scroll_) в циклах** – кеширую значения перед циклом.

4. Использую will-change для сложных анимаций, подсказывая браузеру об изменениях:

.element {
  will-change: transform;
}

5. Virtual DOM (React/Vue) – минимизирую прямые манипуляции с DOM, полагаясь на diff-алгоритмы фреймворков.