Как правильно оптимизировать обработку событий прокрутки в JavaScript?

Оффтоп javascript
1

Проблема с производительностью при обработке скролла

У нас есть компонент интерфейса, который реагирует на события прокрутки страницы через JavaScript. Каждое такое событие требует довольно много ресурсов для обработки. Когда пользователь быстро прокручивает страницу, создается очередь из множества событий, пока первые еще обрабатываются.

Из-за этого компонент попадает в состояние постоянной обработки прокрутки. Он пытается отрендерить каждый промежуточный шаг скролла, даже если пользователь уже ушел намного дальше.

Пример ситуации

Представьте: пользователь прокрутил от позиции 1 к позиции 2, потом к позиции 3, потом к 4, 5 и так далее. Но система все еще рендерит переход с позиции 2 на 3, хотя пользователь уже на позиции 10.

Что хотелось бы получить

Нужен умный способ управления этими событиями. Было бы отлично, если бы можно было обработать текущее событие прокрутки, потом сразу “перепрыгнуть” к актуальной позиции пользователя, пропустив все устаревшие промежуточные события.

Какой лучший подход для решения этой задачи?

2

Можно смешивать оба подхода! Я использую throttle для быстрой реакции и debounce для тяжелых вычислений. Обновляю позицию каждые 15 мс, но отрисовываю DOM только когда пользователь замедляет прокрутку. Какой у вас конкретный случай? Что так сильно нагружает ресурсы?

3

Я делаю это через requestAnimationFrame! Ставлю флаг на первом scroll, а остальные события только обновляют позицию - новую обработку не запускают. В requestAnimationFrame проверяю флаг, и если он есть - обрабатываю последнюю позицию и сбрасываю флаг. Обработка идет максимум 60 раз в секунду вместо сотен. Работает плавно, даже на слабых устройствах тормозов нет.

4

У меня была такая же проблема с бесконечной прокруткой. Поставил debounce с таймером на 16-20 мс — если приходит новое событие скролла, старое отменяется. Обрабатывает события когда поток затихает. Плюс добавил throttle для важных штук типа индикатора загрузки, где нужна быстрая реакция.