Производительность window.onscroll

Событие window.onscroll бывает крайне полезным. Оно незаменимо для создания эффекта параллакса, отслеживания положения на странице и многого другого. Но если использовать его неправильно, можно радикально снизить производительность страницы, и, как следствие, сделать пребывание на ней невыносимым для посетителя.
Итак, каким образом можно полностью использовать возможности события и при этом не терять драгоценные фреймы в секунду? Один из ответов: совместное использование window.onscroll и setInterval.

window.onscroll = doThisStuffOnScroll;

function doThisStuffOnScroll() {
    console.log('You scrolled');
}

Главная проблема вышеприведенного кода (как и window.onscroll в целом) заключается в том, что он срабатывает слишком часто. При включенной функции плавного скроллинга в браузере, событие будет срабатывать до нескольких десятков и даже сотен раз в секунду, в зависимости от скорости прокрутки, и даже если вы не используете никаких сложных расчетов, на слабых компьютерах это может привести к существенному падению FPS. Поэтому решением становится ограничение частоты срабатывания события.

var scrolled = false;

window.onscroll = doItOnScroll;

function doItOnScroll() {
    scrolled = true;
}

setInterval(function() {
    if(scrolled) {
        scrolled = false;
        console.log('Сработало');
    }
}, 100);

Вот, что делает этот код:

  1. Создает переменную scrolled, со значением по умолчнию false
  2. При прокрутке страницы функция doItOnScroll() меняет значение scrolled на true
  3. Функция внутри setInterval раз в 100 мс проверяет didScroll, и если переменная равняется true, сбрасывает её на начальное значение и выполняет поизвольный код.

Таким образом, любые вычисления, повешенные на window.onscroll, будут срабатывать не чаще 10 раз в секунду, что радикально улучшит производительность. В большинстве случаев достаточно этого способа, он прост, понятен и легко внедряется в любой проект.

Добавить комментарий