[ITEM 3] QUESTION: Что такое Intersection Observer?

Інтерфейс Intersection Observer в JavaScript є потужним і ефективним інструментом, призначеним для асинхронного спостереження за перетином цільового елемента з його батьківським контейнером або з областю видимості самого браузера, відомою як viewport. Головна перевага цього підходу полягає в тому, що код виконується не на кожний рух миші або піксель прокручування, а тільки в моменти зміни стану видимості, що колосально знижує навантаження на процесор і підвищує продуктивність веб-сторінки.

Для створення спостерігача використовується конструктор new IntersectionObserver(callback, options), де функція зворотного виклику спрацьовує при кожному перетині, а об'єкт опцій дозволяє налаштувати кореневий елемент, відступи і пороги спрацьовування. Після створення спостерігача необхідно запустити процес стеження за конкретним DOM-вузлом за допомогою методу observer.observe(element), передавши йому потрібний елемент.

Класичними прикладами практичного застосування Intersection Observer є дві поширені задачі: ліниве завантаження зображень і нескінченна прокрутка. У першому випадку картинка починає завантажуватися з сервера тільки тоді, коли користувач наближається до неї під час скролу. У другому випадку спеціальний елемент-маркер у самому низу сторінки запускає підвантаження наступної порції контенту рівно в той момент, коли потрапляє в поле зору користувача, створюючи плавний і безшовний досвід взаємодії.