Почему операции с DOM медленные

Операции с DOM медленные, потому что взаимодействие с ним требует перерисовки (repaint) и перерасчёта макета (reflow). Каждое изменение DOM заставляет браузер пересчитывать стили, геометрию элементов и обновлять экран.

Пример:

// Плохо: вызывает reflow на каждой итерации
for (let i = 0; i < 100; i++) {
  element.style.width = i + 'px';
}

// Лучше: использовать requestAnimationFrame или batch-изменения
const newWidth = 100;
element.style.width = newWidth + 'px';

Оптимизации:

1. Минимизировать количество DOM-операций
2. Использовать documentFragment для групповых вставок
3. Применять CSS-трансформации (transform, opacity), которые не вызывают reflow
4. Использовать виртуальный DOM (React, Vue) для минимизации прямых операций