Встречается на собеседованиях • сегодня

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

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

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

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

css

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

Избегаю чтения layout свойств (offset, scroll) в циклах** – кеширую значения перед циклом.
Использую will-change для сложных анимаций, подсказывая браузеру об изменениях:

css

.element {
  will-change: transform;
}

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

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!

Попробовать бесплатно

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос

пример собеседования

фреймворки на собеседовании

типичные вопросы junior

интервью вопросы и ответы