Какие браузерные API полезны фронтенд-разработчику — IntersectionObserver, ResizeObserver, Storage, History?
- Как сделать бесконечную прокрутку?
- Как узнать, что элемент появился на экране?
IntersectionObserver — сообщает, когда элемент входит в видимую область: ленивая загрузка, бесконечная прокрутка, аналитика просмотров — без дорогих обработчиков scroll. ResizeObserver — изменение размеров элемента. localStorage/sessionStorage — небольшие данные в браузере (строки, синхронно), IndexedDB — большие и структурированные. History API (pushState, popstate) — смена URL без перезагрузки, основа маршрутизации SPA. Ещё: Clipboard, Notifications, Geolocation (с разрешения пользователя), BroadcastChannel между вкладками.
- Обработчик scroll на каждый кадр — частая причина тормозов
- В localStorage не хранят токены — доступны любому скрипту при XSS
- Проверять поддержку API в целевых браузерах
Подробно
const io = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) loadMore();
});
io.observe(document.querySelector('#sentinel'));Что хотят услышать
- IntersectionObserver вместо scroll.
- Хранилища и их ограничения.
- History API.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Бесконечную прокрутку лучше делать проверкой позиции элемента на каждое событие scroll
- ✓IntersectionObserver — видимость элемента, History — URL без перезагрузки
- ✗localStorage — безопасное место для токенов доступа: скрипты на странице его не читают
- ✗History API перезагружает страницу при pushState
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.