Этап 2 из 19 · ≈ 6 ч

Как работает браузер

Основа с Junior

Движки, разбор HTML и CSS, построение DOM и CSSOM, отрисовка и DevTools.

Браузер — сложная программа: сетевой слой, движок отрисовки (Blink в Chrome и Edge, WebKit в Safari, Gecko в Firefox) и движок JavaScript (V8, JavaScriptCore, SpiderMonkey).

Конвейер отрисовки

  1. HTML разбирается в DOM, CSS — в CSSOM.
  2. Вместе они дают дерево отрисовки — только видимые элементы с вычисленными стилями.
  3. Layout (reflow) — расчёт размеров и положения.
  4. Paint — заливка пикселей по слоям.
  5. Composite — сборка слоёв на GPU.

Синхронный <script> останавливает разбор HTML, пока скрипт не загрузится и не выполнится, — поэтому скрипты подключают с defer или type="module".

DevTools

Elements (DOM и стили), Console, Network (запросы, тайминги, кэш), Performance (что занимает время на кадре), Application (cookies, localStorage, service worker), Lighthouse (аудит). Уверенное владение DevTools — то, что отличает джуна, который ищет ошибку час, от того, кто находит её за минуту.

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

Junior ≈ 6 ч

  • Описывает конвейер отрисовки — DOM, CSSOM, layout, paint, composite
  • Находит ошибку и медленный запрос с помощью Elements, Console и Network в DevTools

Практика. Найти через DevTools 3 проблемы на учебной странице — ошибку в консоли, неудачный запрос, неприменённый стиль — и исправить.

Middle ≈ 4 ч

  • Записывает и читает профиль во вкладке Performance, находит долгие задачи и лишние пересчёты раскладки
  • Объясняет, почему синхронный скрипт блокирует разбор HTML

Практика. Записать профиль загрузки и взаимодействия тяжёлой страницы и письменно объяснить, на что уходит время кадра.

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

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

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

Смотреть все
Как браузер отрисовывает страницу и чем reflow отличается от repaint?Junior

HTML → DOM, CSS → CSSOM, вместе → дерево отрисовки → layout (геометрия: размеры и позиции) → paint (пиксели слоёв) → composite (сборка слоёв на GPU). Reflow — пересчёт раскладки при изменении геометрии, дорогой; repaint — перерисовка без изменения геометрии…

Полный разбор
Чем отличаются атрибуты async и defer у тега script?Junior

Обычный <script> останавливает разбор HTML до загрузки и выполнения. defer — загрузка параллельно, выполнение после разбора HTML, по порядку подключения. async — загрузка параллельно, выполнение сразу по готовности, в произвольном порядке.

Полный разбор
Как вы используете DevTools при тестировании?Junior

DevTools помогают локализовать баг: Network — запросы и ответы, Console — ошибки JavaScript, Application — cookies и хранилища, Elements — вёрстка.

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

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

Полный разбор
Что такое всплытие и перехват событий и как работает делегирование?Junior

Событие проходит три фазы: перехват (от window вниз к цели), цель, всплытие (от цели вверх). Обработчики по умолчанию срабатывают на всплытии. Делегирование — один обработчик на родителе ловит события детей через всплытие и определяет источник по event.target…

Полный разбор
Как работает event loop в JavaScript — макрозадачи и микрозадачи?Junior

JavaScript выполняется в одном потоке. Цикл событий берёт одну макрозадачу (скрипт, setTimeout, событие, сетевой ответ), выполняет её до конца, затем все микрозадачи (then у промисов, await-продолжения, queueMicrotask), затем при необходимости отрисовку, и…

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

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

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

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

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

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

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