От адреса в строке браузера до текста, картинок и кнопок: разбираем один запрос без магии.
Страница не приезжает одним скриншотом
Ты вводишь адрес страницы с расписанием. Через мгновение видишь заголовок, фотографию и список занятий. Кажется, что сайт просто появился, но браузер получил данные и построил интерфейс. Отдельные части страницы могут приходить разными запросами и в разное время.
Полезно различать три вещи: адрес ресурса, передачу его содержимого и отрисовку. Ошибка в одной из них не означает, что сломались все остальные. Поэтому бывает, что текст уже виден, а фотография ещё загружается.
Адрес помогает найти сервер
Домен — привычное человеку имя, например example.com. DNS помогает получить сетевой адрес для соединения. В реальности часть сведений может быть уже сохранена в кэше, поэтому одинаковая последовательность не обязательно выполняется заново при каждом открытии.
Далее браузер устанавливает соединение. HTTPS защищает передачу с помощью TLS. Это не оценка честности текста на странице: шифрование соединения и достоверность содержимого отвечают на разные вопросы.
Запрос и ответ
В упрощённом виде браузер просит определённый ресурс, а сервер возвращает статус, заголовки и тело ответа. Статус 200 означает успешную обработку запроса. 404 говорит, что ресурс не найден; это не обязательно означает недоступность всего сайта.
Представь сайт из главной страницы и трёх статей. Если одну статью удалили, её адрес может вернуть 404, пока остальные страницы продолжают работать. Проверять нужно тот адрес, который не открывается.
GET /articles/first-site HTTP/1.1
Host: example.com
HTTP/1.1 200 OK
Content-Type: text/html
<!doctype html>
<html>...</html>Из HTML получается страница
HTML описывает структуру. Найдя ссылки на CSS, изображения и скрипты, браузер может запросить их отдельно. CSS влияет на оформление, JavaScript — на поведение и дополнительные загрузки данных. Порядок выполнения зависит от того, как подключены ресурсы.
Например, заголовок расписания может находиться в HTML, а свободные часы — приходить отдельным запросом. Поэтому видимый заголовок ещё не доказывает, что список занятий загрузился. Аналогично успешный ответ сервера не гарантирует отсутствие ошибки в скрипте.
Как увидеть это своими глазами
Открой панель разработчика и вкладку Network, затем обнови страницу. Сначала посмотри запрос документа, после — изображения и стили. У каждого запроса есть адрес, статус, размер и время. На одной странице ты увидишь набор ресурсов, а не один неделимый «сайт».
Возьми любую небольшую страницу без личных данных. Сравни первое и повторное открытие: некоторые ресурсы могут использовать кэш. Затем открой заведомо несуществующий путь на своём тестовом сайте и сравни ответ с главной страницей. Это показывает разницу между отсутствующей страницей и невозможностью соединиться с сервером.