Оптимизация DOM: Reflow и Repaint

Браузер отрисовывает страницу в несколько этапов. Изменение стилей или структуры DOM может запускать дорогие процессы пересчета. Понимание Reflow и Repaint критично для анимаций и сложного UI.

Что такое Reflow и Repaint

• Repaint (Перерисовка): Изменение видимости без изменения геометрии (цвет, фон). Относительно дешево.
• Reflow (Макет/Layout): Изменение геометрии (размер, отступы, добавление узлов). Требует пересчета положения всех элементов. Очень дорого.

// Плохо: вызов рефлоу в цикле
const list = document.getElementById('list');
for (let i = 0; i < items.length; i++) {
  const li = document.createElement('li');
  li.textContent = items[i];
  list.appendChild(li); // Рефлоу на каждой итерации!
}

// Хорошо: DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < items.length; i++) {
  const li = document.createElement('li');
  li.textContent = items[i];
  fragment.appendChild(li);
}
list.appendChild(fragment); // Один рефлоу в конце

Чтение после Записи

Чтение свойств макета (offsetHeight, getComputedStyle) после изменения стилей форсирует синхронный рефлоу, чтобы браузер вернул актуальные данные.

// Принудительный рефлоу
box.style.height = '100px';
console.log(box.offsetHeight); // Браузер пересчитывает макет прямо сейчас
box.style.width = '100px';     // Еще один рефлоу

Группируйте чтения и записи. Сначала прочитайте все значения, потом примените все изменения.

CSS Contain и will-change

Свойство contain: layout подсказывает браузеру, что элемент изолирован, и его изменение не повлияет на остальную страницу. will-change предупреждает об upcoming изменениях (например, для трансформаций), позволяя браузеру подготовить слои композитинга. Используйте их осторожно, чтобы не увеличить потребление памяти.