Наблюдатели в браузере
Вопрос
Какие бывают Observer API и для чего каждый?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
IntersectionObserver - пересечение с областью видимости
ResizeObserver - изменение размеров элемента
MutationObserver - изменения в DOM-дереве
PerformanceObserver - метрики производительности
все асинхронные и не вызывают синхронный reflow
наблюдателя нужно отключать при размонтировании
Что могут спросить следом
- Как сделать бесконечную ленту на IntersectionObserver
- Чем ResizeObserver лучше слушателя resize у окна
- Почему обработчик скролла с getBoundingClientRect тормозит
Разбор
IntersectionObserver сообщает, когда элемент входит в область видимости -
ленивая загрузка картинок, бесконечная лента, показ метрик просмотра. Он заменил
обработчик скролла с getBoundingClientRect, который дёргал layout каждый кадр.
ResizeObserver следит за размерами конкретного элемента, а не окна - это то, что нужно
для адаптивных компонентов внутри изменяемых контейнеров. MutationObserver ловит правки
DOM (нужен редко, обычно при интеграции с чужими виджетами). PerformanceObserver отдаёт
записи о LCP, layout shift, длинных задачах.
Все они асинхронные и не вызывают синхронный пересчёт - этим и ценны. И все требуют
disconnect() в очистке эффекта.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.