Получить доступ

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

Основа с 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

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

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

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

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

Закрытая бета

Знать тему — половина дела

На живом собеседовании sotto слышит вопрос интервьюера и показывает короткий ответ и план. Оставьте контакт — пришлём доступ и промокод.

  • Промокод на 2 часа — сверх пробных 30 минут
  • Программа для Windows — скачать сразу, войти — через Яндекс ID или VK ID
  • Прямая связь с разработчиком: что улучшить — сделаем