Resize & Scroll

Resize

Если для viewport (окно просмотра) изменится ширина или высота, то будет вызвано событие window.resize Такое событие может произойти например в результате изменения размера окна браузера или изменения масштабного коэффициента масштабирования страницы или изменения размера элемента iframe.

Scroll

Если viewport документа подвергается scroll, то вызывается событие window.scroll

Обработка этих событий

window.addEventListener('resize',callback);
window.addEventListener('scroll',callback);
        
Проблема этих событий

Эти события (а также mouseover) создают большое количество вызовов функции callback. Если callback функция осуществляет вычисления с большой нагрузкой на CPU то пользователь столкнется с неравномерным скачкам изображения или даже торможением приложения.

Demo

количество событий resize: количество событий scroll:

Выход из этой ситуации в том, чтобы не обрабатывать callback так часто, как страбатывают события. Для этого существую несколько подходов - debouncing и throttling, а также встроенный в браузер метод requestAnimationFrame.