Почему производительность drag-and-drop деградирует со временем, а не сразу?

Почему производительность drag-and-drop падает постепенно?

Проблема часто связана с тем, как разработчики реализуют механизм перетаскивания. При каждом новом цикле drag-and-drop (mousedown -> mousemove -> mouseup) могут добавляться новые обработчики событий, но не удаляться старые. Со временем количество активных слушателей растёт, и браузер тратит всё больше ресурсов на их вызов, даже когда перетаскивание не активно.

Основные причины деградации

• Накопление обработчиков: Если при каждом mousedown добавлять обработчики mousemove и mouseup, но не удалять их после mouseup, они остаются в памяти.
• Утечки памяти: Создание временных DOM-элементов (например, клонов перетаскиваемого объекта) без последующего удаления приводит к росту потребления памяти.
• Неоптимизированные вычисления: Постоянный пересчёт позиций элементов или вызов дорогих функций (например, getBoundingClientRect) на каждом mousemove без кэширования.

Пример проблемы и решения

// Проблемный код: обработчики не удаляются
let dragItem = document.getElementById('drag');
dragItem.addEventListener('mousedown', function(e) {
  function onMouseMove(e) {
    // дорогие вычисления
    dragItem.style.left = e.clientX + 'px';
  }
  function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

// Исправленный код: удаление обработчиков после завершения
dragItem.addEventListener('mousedown', function(e) {
  const onMouseMove = (e) => {
    requestAnimationFrame(() => {
      dragItem.style.left = e.clientX + 'px';
    });
  };
  const onMouseUp = () => {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  };
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

Вывод

Для предотвращения деградации производительности drag-and-drop всегда удаляйте временные обработчики событий после завершения перетаскивания, используйте requestAnimationFrame для оптимизации частоты обновлений и избегайте создания лишних DOM-элементов без очистки. Это особенно важно в приложениях с длительной сессией пользователя.