Этап 15 из 19 · ≈ 3 ч

Браузерные API

Полезно знать с Junior

Хранилища, Web Workers, Service Worker и PWA, Intersection Observer и другие возможности платформы.

Браузер умеет гораздо больше, чем показывать страницы.

APIдля чего
localStorage, sessionStorageмаленькие данные строками, синхронно
IndexedDBбольшие структурированные данные, офлайн
Cookiesмаленькие данные, уходят на сервер с каждым запросом
Web Workersвычисления в отдельном потоке
Service Workerперехват запросов, офлайн-режим, push-уведомления
Intersection Observerэлемент появился в видимой области: ленивая загрузка, бесконечная лента
ResizeObserverизменился размер элемента
History APIмаршрутизация в SPA
Clipboard, Notifications, Geolocationдоступ к возможностям устройства с разрешения пользователя

PWA — веб-приложение с манифестом и Service Worker: устанавливается на домашний экран, работает офлайн. Для многих задач заменяет отдельное мобильное приложение.

Критерии освоения

Junior ≈ 3 ч

  • Использует localStorage и sessionStorage и понимает их ограничения

Практика. Сохранять черновик формы в localStorage с обработкой ошибок доступа.

Middle ≈ 6 ч

  • Использует Intersection Observer для ленивой загрузки и бесконечной ленты
  • Выносит тяжёлые вычисления в Web Worker
  • Объясняет Service Worker и делает простое офлайн-кэширование

Практика. Сделать бесконечную ленту на Intersection Observer и офлайн-режим страницы на Service Worker.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Что такое cookies? Чем они отличаются от localStorage и sessionStorage?Junior

Cookies — небольшие данные, которые браузер отправляет на сервер с каждым запросом (сессия, настройки); localStorage и sessionStorage — хранилища, доступные только скриптам страницы.

Полный разбор
Какие браузерные API полезны фронтенд-разработчику — IntersectionObserver, ResizeObserver, Storage, History?Junior

IntersectionObserver — сообщает, когда элемент входит в видимую область: ленивая загрузка, бесконечная прокрутка, аналитика просмотров — без дорогих обработчиков scroll. ResizeObserver — изменение размеров элемента. localStorage/sessionStorage — небольшие…

Полный разбор
Как сделать HTTP-запрос через fetch и правильно обработать ошибки?Junior

fetch(url, options) возвращает Promise ответа. Важно: промис отклоняется только при сетевой ошибке — на 404 и 500 он выполняется успешно, поэтому надо проверять response.ok или status. Тело читают await res.json() (тоже промис). Для POST — method, headers…

Полный разбор
Как найти и изменить элементы DOM на JavaScript?Junior

Найти: querySelector(css-селектор) — первый элемент, querySelectorAll — статический список. Изменить: textContent — текст (безопасно), innerHTML — разметка (опасно с пользовательскими данными — XSS), classList.add/remove/toggle, setAttribute, dataset…

Полный разбор
Что такое Promise и чем отличаются Promise.all, allSettled, race и any?Junior

Promise — объект будущего результата в одном из состояний: pending, fulfilled, rejected; состояние меняется один раз. then/catch/finally возвращают новый промис — получаются цепочки. all — все успешны или первая ошибка; allSettled — дождаться всех и получить…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования