Последняя загадка нашего расследования

За последние четыре урока мы почти полностью восстановили картину открытия сайта.

Мы знаем, что браузер находит сервер через DNS, отправляет HTTP-запрос, получает ответ и скачивает не только HTML, но и CSS, JavaScript, изображения, шрифты и другие ресурсы.

Кажется, что после этого остаётся сделать совсем немного.

Но возникает новый вопрос. Если все файлы уже скачаны, почему страница не появляется на экране мгновенно? Почему иногда сначала видно только текст, затем появляются стили, а изображения ещё несколько секунд продолжают загружаться?

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

---

Получить файлы — ещё не значит показать страницу

Представьте, что вам привезли мебель для новой квартиры. Коробки уже стоят в комнате. Но жить в квартире пока нельзя. Сначала нужно распаковать мебель, собрать её, расставить по местам и только потом получится полноценный интерьер.

Браузер работает очень похоже. Получить HTML, CSS и JavaScript — это только начало. Дальше ему предстоит понять, как все эти части связаны между собой.

---

Всё начинается с HTML

Первым браузер обычно получает HTML-документ. Он начинает читать его сверху вниз.

Во время чтения браузер постепенно узнаёт, какие элементы должны появиться на странице: заголовки, абзацы, изображения, ссылки, кнопки, формы.

Но одновременно он замечает, что HTML содержит ссылки на другие ресурсы: файл стилей, JavaScript, изображения, шрифты.

Значит, работу нельзя считать законченной. Нужно получить всё необходимое.

Если браузер уже знает структуру страницы, почему он не показывает её сразу?

---

Затем браузер получает остальные ресурсы

После чтения HTML браузер начинает загружать всё, что понадобится странице: CSS-файлы, JavaScript, изображения, шрифты, другие ресурсы.

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

Но даже после получения всех ресурсов работа ещё продолжается. Теперь браузеру нужно объединить их в одну страницу.

---

Как собирается страница?

Представьте пазл. Все детали уже лежат на столе. Но картинка появится только тогда, когда каждая деталь окажется на своём месте.

С веб-страницей происходит то же самое. Браузер:

1. читает HTML;
2. применяет стили из CSS;
3. выполняет JavaScript;
4. размещает элементы на странице;
5. рисует результат на экране.

Именно этот процесс обычно называют рендерингом страницы.

Не нужно запоминать это слово как сложный технический термин. Достаточно понимать идею: рендеринг — это процесс, в котором браузер превращает полученные файлы в страницу, которую видит пользователь.

💡 Почему так делают в индустрии

Когда разработчик говорит «страница долго рендерится», он редко имеет в виду одну конкретную проблему. Причина может быть в слишком большом HTML-документе, тяжёлых изображениях, большом количестве стилей или сложном JavaScript. Поэтому инженеры рассматривают рендеринг как цепочку этапов, а не как одно действие.

---

Почему иногда страница появляется постепенно?

Наверняка вы замечали такую картину. Сначала появляется текст. Через мгновение меняются шрифты. Затем «подпрыгивают» блоки. После этого начинают появляться изображения.

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

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

Значит, разработчик может увидеть все эти этапы своими глазами?

---

🤖 AI-помощник

Попробуйте спросить AI:

«Объясни процесс рендеринга веб-страницы без использования слов DOM, CSSOM и Render Tree.»

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

---

Что мы уже знаем?

Наше расследование почти завершено. Теперь вся цепочка выглядит так:

1. Пользователь вводит URL.
2. Браузер находит сервер.
3. Браузер отправляет HTTP-запрос.
4. Сервер отправляет ресурсы сайта.
5. Браузер получает HTML и другие файлы.
6. Браузер читает их, объединяет и строит страницу.
7. Пользователь видит готовый сайт.

Мы наконец ответили на вопрос, вынесенный в название модуля: почему открывается сайт?

Но одно дело — понимать процесс в теории. Совсем другое — увидеть его своими глазами. В следующем уроке мы познакомимся с главным инструментом любого фронтенд-разработчика — DevTools — и посмотрим, как все этапы открытия сайта выглядят в реальном браузере.

---

Частая ошибка новичков

«Браузер получает HTML и сразу показывает готовую страницу.»

На самом деле между получением HTML и отображением страницы происходит ещё несколько важных этапов. Браузер должен прочитать HTML, загрузить связанные ресурсы, применить стили, выполнить JavaScript и только после этого собрать итоговую страницу. Именно поэтому открытие сайта — это процесс, а не одно мгновенное действие.