Ответ
Когда браузер получает веб-страницу, происходит несколько ключевых этапов:
- DNS-запрос – преобразование домена в IP-адрес сервера.
- Установка TCP-соединения – "рукопожатие" с сервером.
- HTTP-запрос – браузер отправляет GET-запрос.
- Обработка на сервере – сервер генерирует ответ (HTML, CSS, JS).
- Рендеринг – браузер парсит HTML, строит DOM, затем CSSOM, объединяет их в Render Tree, вычисляет layout и отрисовывает пиксели.
Пример минимального HTTP-ответа:
HTTP/1.1 200 OK
Content-Type: text/html
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>Hello</body>
</html>После загрузки HTML браузер параллельно запрашивает связанные ресурсы (CSS, JS, изображения) и выполняет JavaScript.
Ответ 18+ 🔞
А, ну это же классика, блядь! Сидишь ты такой, вводишь в адресную строку "pornhub.com" (ну или там "википедия", неважно), и начинается цирк, ёпта!
Первым делом, браузер твой, хитрая жопа, начинает мозговать: "А где, сука, этот сервер живёт?". Он доменное имя это самое, типа "pornhub.com", в IP-адрес превращает. Это как спросить у прохожего: "Мужик, а где тут библиотека?", а он тебе: "Да вон, за углом, дом 228". Это и есть DNS-запрос, блядь.
Дальше — установка TCP-соединения. Представь, ты звонишь другу. "Алло, Вася? — Алло, Петя! — Слышу тебя! — И я тебя слышу!" Вот это самое трёхэтажное "рукопожатие", только между браузером и сервером. Без этого нихуя не передашь.
Ну, связались. Теперь браузер, наглец, посылает HTTP-запрос. По сути, он орет в трубку: "Эй, сервак, дай-ка нахуй ту главную страницу, файл index.html! Быстро, я жду!". Это и есть GET-запрос, если по-умному.
Сервер, получив этот крик души, начинает обработку. Он там шаманит, в базах данных ковыряется, скрипты выполняет и в итоге плюёт обратно пачку текста. Вот, смотри, как он может ответить, минимально так, без изысков:
HTTP/1.1 200 OK
Content-Type: text/html
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>Hello</body>
</html>Видишь? "200 OK" — это типа "всё пиздато, держи, чмошник, твой HTML". А мог бы и "404 Not Found" послать, это как "пошёл нахуй, нету тут ничего".
И вот тут начинается самое весёлое — рендеринг, ёбанашка! Браузер получает эту простыню из тегов и начинает её разбирать, как дурак инструкцию к китайскому чайнику. Сначала строит из неё DOM — древовидную структуру, всё по полочкам.
Параллельно он, подлец, видит ссылки на CSS-файлы и скрипты. И тут же начинает их качать, овердохуища запросов летит! CSS он разбирает в CSSOM — дерево стилей.
Потом он, гений, скрещивает DOM и CSSOM в Render Tree — уже понимает, ЧТО рисовать и КАК это должно выглядеть. Дальше — layout (или reflow): вычисляет, где каждый пиксель должен стоять, какие размеры, отступы — хуйня сложная, блядь!
И финальный акт — painting. Он берёт эту схему и начинает красить пиксели на экране. Только вот пока он это делает, уже скачанные скрипты (JavaScript) могут начать своё чёрное дело: DOM менять, стили перекрашивать, и браузеру опять всё пересчитывать! Короче, пиздец, а не работа.
Вот так, коротко и без соплей, твоё "о, я всего лишь страничку открыл" оборачивается такой ебёрлой под капотом, что мама не горюй!