Вопросы по Браузер и DOM
Как браузер строит и рисует страницу, как работают события, хранилища и воркеры, как мерить скорость и защищаться от XSS и CSRF. Закрывает браузерный блок фронтенд-собеса.
Проверьте себя: тест по браузеру и DOM
20 вопросов, 10 минут, уровень junior, middle или senior
DOM API
Поиск, создание и изменение узлов, живые и статичные коллекции, атрибуты и свойства.
Урок: DOM API за 6 минут 6 минСобытия
Фазы распространения, делегирование, preventDefault и stopPropagation, опции слушателей.
Урок: События в браузере за 7 минут 7 мин- Перестановка перетаскиванием
- Порядок фаз события
- Своё событие
- Делегирование событий
- Остановка события
- Ошибка в делегировании
- dispatchEvent синхронный
- Делегирование событий
Ещё 12 вопросов и задач
- Опции addEventListener
- Фазы события
- Какое событие не всплывает
- Зачем passive: true
- Порядок capture и bubble
- preventDefault не останавливает всплытие
- Почему обработчик не снимается
- Делегирование: плюсы и подводные камни
- Как распространяются события в DOM
- stopPropagation и соседние обработчики
- target и currentTarget
- Всплытие, погружение, делегирование
Рендеринг страницы
Критический путь: DOM, CSSOM, layout, paint, composite. Reflow, repaint и блокирующие ресурсы.
Урок: Как браузер рисует страницу 7 минХранилища
Cookie, localStorage, sessionStorage, IndexedDB и Cache API: объём, срок жизни и доступ.
Урок: Хранилища браузера за 6 минут 6 минWeb API и воркеры
Web Worker, Service Worker, IntersectionObserver, ResizeObserver, fetch с AbortController.
Урок: Web API и воркеры без мистики 7 мин- Наблюдатели в браузере
- Web Worker
- Как отменить fetch
- Три наблюдателя
- Service Worker
- Structured clone
- fetch и ответ 404
- Чем делать бесконечную ленту
Ещё 9 вопросов и задач
- Как данные попадают в воркер через postMessage
- requestAnimationFrame против setInterval
- Как сделать приложение офлайн
- Web Worker и Service Worker: в чём разница
- Где работает Service Worker
- Scope Service Worker по умолчанию
- Почему новая версия Service Worker не активируется
- Transferable: передача ArrayBuffer в воркер
- Что недоступно в Web Worker
Производительность и Web Vitals
LCP, INP и CLS: что измеряют, пороги и как их улучшать. Ленивая загрузка и приоритеты.
Урок: Производительность и Core Web Vitals 7 минБезопасность фронтенда
XSS, CSRF, CSP, SameSite-куки, Trusted Types, кликджекинг и same-origin policy.
Урок: Безопасность фронтенда: XSS, CSRF, CSP 8 минDOM на практике
Задачи с живым DOM: делегирование, рендер списков, работа с формами и обработчиками.
Урок: DOM на практике: типовые задачи 6 мин- Объявление для скринридера
- Копирование в буфер
- Адрес как состояние
- Загрузка картинки с обработкой ошибки
- throttle на кадрах
- Реакция на изменение размера
- Работа с выделением
- Синхронизация между вкладками
Ещё 27 вопросов и задач
- Работа во вкладке в фоне
- Классы и data-атрибуты
- Построение узлов без innerHTML
- Чтение выбранного файла
- Форматирование по локали
- Реакция на медиазапрос
- Состояние сети
- Прокрутка к элементу
- Живой поиск с отменой
- Запрос с таймаутом и отменой
- Ловушка фокуса
- Сбор данных формы
- Ленивая подгрузка через IntersectionObserver
- Порядок очередей
- MutationObserver
- Блокировка прокрутки
- Безопасная работа с localStorage
- Обход дерева
- URLSearchParams
- Снятие обработчиков через signal
- Element.closest
- DocumentFragment
- Удаление по кнопке с иконкой
- Что плохого в innerHTML +=
- Поиск с подсказками
- Список задач на чистом JS
- Отправка формы по Enter