С нуля: что браузер делает на самом деле
Когда браузер открывает страницу, он скачивает HTML, строит DOM, применяет CSS, запускает JavaScript на единственном главном потоке и рисует пиксели. Это карта «с нуля» и восемь слов, которые остальной трек считает уже знакомыми.
Ты вводишь URL, нажимаешь Enter — и через несколько сотен миллисекунд перед тобой полностью интерактивная страница. Что-то получило байты от сервера, решило, какого цвета должен быть каждый пиксель, и передало управление твоим пальцам. Это браузер — и он делает всё это в одном потоке выполнения, по одной задаче за раз, не спрашивая тебя, что делать следующим. Каждая продвинутая тема этого трека — event loop, render pipeline, React Fiber, Web Workers, Core Web Vitals — это деталь истории про один поток. Этот урок — карта перед восхождением.
Единственное, что делает браузер
Ты даёшь браузеру URL. Он скачивает HTML-документ и читает его сверху вниз. По ходу чтения строит дерево узлов — DOM — в котором каждый заголовок, абзац, изображение и кнопка становятся отдельным элементом. Связанные CSS-файлы скачиваются и превращаются в дерево стилей. JavaScript-файлы скачиваются, разбираются и выполняются на главном потоке. Когда JS заканчивает работу, браузер объединяет DOM и стили, вычисляет геометрию каждого элемента и отдаёт команды рисования видеокарте. Пиксели появляются на экране.
Это предложение — весь трек в миниатюре. Каждый следующий юнит увеличивает один шаг этого конвейера — и каждая проблема производительности, которую тебе когда-либо придётся отлаживать, вызвана тем, что какой-то шаг занимает больше времени, чем пользователь готов ждать.
Восемь слов, которые остальной трек считает знакомыми
Senior-уроки дальше используют эти термины, не останавливаясь на определениях. Вот они, по одному предложению — что это и зачем оно.
| Слово | Что это | Зачем оно |
|---|---|---|
| HTML | Текстовый файл, описывающий структуру и содержимое страницы с помощью тегов. | Чтобы браузер знал, какой контент есть на странице и как он организован. |
| CSS | Правила, задающие внешний вид элементов: цвет, размер, положение. | Чтобы внешний вид был отделён от содержимого и мог меняться без переписывания HTML. |
| JavaScript | Язык программирования, который выполняется в браузере и может изменить что угодно на странице. | Чтобы страницы реагировали на клики, подгружали данные и обновлялись без перезагрузки. |
| DOM | Живое дерево объектов, которое браузер строит из HTML — каждый элемент становится узлом. | Чтобы у JavaScript было что-то конкретное для чтения и изменения во время работы. |
| Парсинг | Чтение текстового файла и преобразование его в структуру данных, с которой браузер умеет работать. | Чтобы сырые байты из сети стали деревьями DOM и стилей, нужными рендереру. |
| Главный поток | Единственный поток выполнения, в котором происходят парсинг, JS, layout (вычисление геометрии элементов) и paint. | Чтобы у браузера было одно авторитетное место, которое владеет DOM и безопасно его изменяет. |
| Repaint / reflow | Repaint перерисовывает пиксели; reflow пересчитывает layout перед перерисовкой. | Чтобы экран оставался корректным после изменений DOM или стилей — но оба стоят времени. |
| Event loop | Планировщик, выбирающий следующую задачу — обработчик клика, таймер, сетевой колбэк — и запускающий её на главном потоке. | Чтобы один поток мог выглядеть делающим много вещей, не блокируясь навсегда на одной из них. |
Как они складываются вместе
Прочитанные по порядку, слова рассказывают одну историю: браузер скачивает HTML и парсит его в DOM. Одновременно скачивается и парсится CSS — в дерево стилей. JavaScript выполняется на единственном главном потоке — он может читать и изменять DOM, что запускает reflow (если изменилась геометрия) и repaint для отрисовки свежих пикселей. Когда JS ждёт чего-то — клика, таймера, сетевого ответа — event loop откладывает эту работу и берёт следующую задачу, чтобы поток не простаивал. Этот цикл и всё, что может его замедлить, — тема Unit 01. Когда в следующий раз откроешь DevTools и увидишь длинную жёлтую задачу, блокирующую главный поток, — ты сразу будешь знать, какой шаг конвейера за это отвечает.
▸Почему это работает
Почему один поток? Разделяемое изменяемое состояние — корень большинства ошибок конкурентности. Если бы два потока могли трогать DOM одновременно, понадобились бы блокировки везде, а гонки ломали бы layout так, что их почти невозможно воспроизвести. Один поток означает, что DOM всегда в согласованном состоянии. Цена — всё медленное на этом потоке блокирует пользователя от обновлений. Именно поэтому весь трек учит держать главный поток свободным.
Это не нужно зубрить
Две честные ремарки перед восхождением. Первая: никто не держит всё это в голове сразу в первый день — ты встретишь каждое слово снова, в глубине, в своём юните, и тогда оно уляжется. Эта страница — вешалка для деталей, а не экзамен. Вторая: работа браузера звучит просто — скачай, распарси, выполни, нарисуй, — но в каждом шаге спрятано десятилетие оптимизаций и сбоев. Senior-трек учит полной картине, потому что именно это нужно для создания быстрых и корректных веб-приложений под нагрузкой.
Почему браузер использует единственный главный поток для парсинга, JavaScript и рисования?
Расставь, что браузер делает с момента нажатия Enter до появления пикселей на экране:
- 1 Скачать HTML и распарсить его в DOM
- 2 Скачать и распарсить CSS в дерево стилей
- 3 Выполнить JavaScript на главном потоке (может менять DOM)
- 4 Запустить layout (reflow) и нарисовать пиксели на экране
- 01В одном дыхании: что браузер делает, когда открывает страницу, и почему всё происходит в одном потоке?
- 02Назови восемь базовых терминов и дай однострочные определения хотя бы четырём из них.
Работа браузера — один конвейер: скачать HTML и распарсить его в DOM, применить CSS-стили, выполнить JavaScript на главном потоке и нарисовать пиксели. Каждый элемент, который ты видишь или на который кликаешь, — это узел в DOM; каждое визуальное правило живёт в дереве стилей; каждое взаимодействие проходит через event loop, прежде чем попасть в твой код. Конвейер работает в одном главном потоке, потому что разделяемый изменяемый DOM в нескольких потоках стал бы катастрофой гонок. Цена этой безопасности — всё медленное на главном потоке блокирует пользователя: долгие JS-задачи, дорогие reflow, лишние repaint. Всему, чему учит этот трек, — стратегия держать конвейер лёгким. Теперь, когда страница зависает на клик или скролл, ты знаешь, куда смотреть в первую очередь: что-то удержало главный поток слишком долго, заблокировало event loop, и пользователь это почувствовал. Следующий: Unit 01 — Event Loop — где ты узнаешь, как браузер решает, какую задачу запустить следующей, и почему 50-миллисекундная JS-задача способна сломать ощущение от страницы.
Что-то непонятно?
Задай вопрос по этому уроку. Вопросы анонимны и попадают напрямую автору — урок станет лучше.
Примени это
Примени этот урок в реальном проекте.