Как устроена работа веб-сайтов: от запроса к экрану

Клиенты и серверы: основа интернета

Вся логика работы веб-сайтов строится на взаимодействии двух участников: клиента и сервера.

Клиент — это браузер (Chrome, Safari и другие), запущенный на твоём устройстве: ноутбуке, телефоне или планшете. Мобильные приложения тоже работают по тому же принципу. Даже инструменты разработки вроде curl выступают клиентами.

Сервер — это специальный компьютер в сети, на котором хранятся файлы и контент сайта. Примеры серверов: NGINX, Apache HTTP Server. Сервер получает запрос от клиента и отправляет нужный ресурс обратно.

Общаются они через протокол HTTP — набор правил, которые определяют, как именно оформлять запросы и ответы.

Что такое URL и как он устроен

Когда ты хочешь загрузить что-то из интернета, нужно точно указать, что и откуда: адрес называется URL (Uniform Resource Locator).

Пример: http://example.com/images/photo.jpg?version=2

Разберём его на части:

• http:// — протокол, по которому идёт передача данных
• example.com — доменное имя, указывает на конкретный сервер (Domain Name System помогает найти нужный сервер по имени)
• /images/photo.jpg — путь к ресурсу, что именно тебе нужно
• ?version=2 — query string — дополнительные параметры (версия, размер, качество и т. д.)

Типичная веб-страница состоит из множества таких ресурсов: HTML, CSS, JavaScript, изображения. В среднем браузер загружает примерно 70 разных файлов, чтобы показать одну страницу.

HTTP-запрос: что говорит клиент

Вот как выглядит классический запрос, отправляемый браузером:

GET /photo HTTP/1.1
Host: example.com
User-Agent: Intel Mac OS, Chrome/109.0.0.0
Accept: image/avif,image/webp,image/apng,image/svg+xml

Вот из чего состоит запрос:

1. Метод — GET (скачать ресурс) или POST (отправить данные)
2. Путь — какой файл нужен
3. Host — имя сайта (один сервер может хранить много сайтов, поэтому это важно)
4. User-Agent — информация о браузере и системе (сервер может отправить оптимальный вариант контента)
5. Accept — какие форматы может обработать браузер (например, WebP вместо PNG)
6. Cookies — если ты залогинен, они помогают серверу узнать, кто ты (это позволяет показывать персонализированный контент)
7. Body — содержимое (нужен только для загрузки файлов, при обычной загрузке его нет)

HTTP-ответ: что отправляет сервер

На запрос сервер отвечает тремя компонентами:

Статус-код — цифра, которая говорит, всё ли прошло хорошо:

• 200 OK — всё в порядке
• 404 Not Found — файла нет на сервере
• 500 Internal Server Error — сервер что-то напутал при обработке

Заголовки ответа — дополнительная информация о контенте:

• Формат файла (PNG, JPG, WebP)
• Можно ли использовать закэшированный файл завтра или нужен новый запрос
• Время жизни кэша

Body — сам контент: изображение, HTML-код, данные.

Всё вместе

Вот полный цикл:

1. Ты вводишь адрес в адресную строку
2. Браузер оформляет HTTP-запрос
3. Запрос летит к серверу
4. Сервер обрабатывает его и отправляет ответ
5. Браузер получает ответ, парсит HTML и понимает, какие ещё ресурсы загрузить
6. Процесс повторяется для каждого файла (CSS, JS, картинок)
7. Браузер собирает всё в одну страницу и показывает её тебе

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