Ты вводишь адрес сайта, нажимаешь Enter — и через секунду видишь кнопки, картинки и текст.
Кажется, браузер просто открыл страницу.
На самом деле за эту секунду он успел устроить небольшой марафон 😅
1️⃣ Ищет сервер
Сначала браузер через DNS узнаёт, на каком IP-адресе живёт нужный сайт.
Примерно как найти номер телефона человека по его имени.
2️⃣ Отправляет запрос
Браузер подключается к серверу и говорит:
— Привет. Дай мне главную страницу.
Сервер выполняет нужную логику, может сходить в базу данных и возвращает HTML.
3️⃣ Собирает структуру
Браузер читает HTML и строит DOM — дерево всех элементов страницы:
заголовков, кнопок, картинок, форм и блоков.
Затем загружает CSS и понимает, как всё это должно выглядеть.
4️⃣ Подключает JavaScript
JS может изменить страницу, загрузить дополнительные данные, спрятать блоки или добавить новые.
Иногда именно на этом этапе сайт начинает думать о жизни и показывать вечный загрузчик 🙃
5️⃣ Рассчитывает расположение
Браузер вычисляет размеры и координаты каждого элемента:
где будет кнопка, какой ширины станет блок и сколько места займёт текст.
Этот этап называется layout.
6️⃣ Рисует страницу
После этого браузер превращает элементы в реальные пиксели: рисует фон, текст, тени, изображения и анимации.
Готово — страница появилась на экране.
И всё это происходит каждый раз, когда ты открываешь сайт, меняешь размер окна или JavaScript двигает элементы.
Так что браузер — это не просто программа для вкладок. Это полноценный движок, который постоянно разбирает, рассчитывает и перерисовывает твой интерфейс 🚀
А какой этап когда-то сильнее всего ломал тебе мозг: DNS, DOM, layout или отрисовка? Пиши в комментариях — разберём самый популярный подробнее 👇