Курс Тестирование ПО. Занятие 5.2. Что происходит при открытии сайта в браузере?

Лекция о том, что происходит в браузере при открытии сайта: DNS lookup, кэширование, HTTP-запрос к серверу, парсинг HTML и отрисовка страницы. Курс тестирования ПО, занятие 5.2.

Key Takeaways

Открытие страницы состоит из последовательных этапов: DNS lookup, кэширование, HTTP-запрос, парсинг и отрисовка.
Поведение кэша определяется HTTP-заголовками, которые присылает бэкенд.
Браузер загружает ресурсы по мере парсинга HTML, поэтому DevTools Network показывает реальную последовательность запросов.

What the video covers

Открытие сайта начинается с DNS lookup: поиск IP-адреса по доменному имени через кэш браузера, ОС и провайдера, затем через корневые и доменные DNS-серверы.
Браузер проверяет кэш; поведение зависит от заголовков ответа сервера (Cache-Control, ETag, Last-Modified, If-None-Match).
Далее браузер отправляет HTTP-запрос на сервер и получает ответ (статус, заголовки, тело в формате HTML/JSON/XML).
Ссылка на связь с предыдущими лекциями: клиент-серверная архитектура, протокол HTTP, форматы JSON и XML.
Парсинг HTML: браузер построчно, сверху вниз, читает разметку и, встречая ссылки на картинки, стили или скрипты, сразу отправляет запросы за ними.
Все эти запросы видны во вкладке Network в Chrome DevTools.
Отрисовка сайта: объединение HTML, CSS, шрифтов и данных в итоговую страницу.
На сервере запрос проходит через бэкенд, базу данных, кэш и сервисы, после чего возвращается ответ.
В конце лектор задаёт вопрос про ограничение числа параллельных соединений на домен в Chrome (шесть) и говорит, что это можно разобрать дома.

Chapters

Что происходит первым, когда мы вводим адрес сайта в браузере?

Первым шагом выполняется DNS lookup: браузер ищет IP-адрес по доменному имени, сначала в собственном кэше, затем в кэше операционной системы и провайдера, после чего обращается к DNS-серверам.

От чего зависит, будет ли ресурс взят из кэша браузера?

Это зависит от HTTP-заголовков, пришедших с бэкенда, например Cache-Control, ETag, Last-Modified и If-None-Match.

Как браузер загружает картинки и стили страницы?

Браузер парсит HTML сверху вниз и, как только встречает ссылку на внешний ресурс, сразу отправляет за ним запрос. Эти запросы видны во вкладке Network в DevTools.