DNS-резолюция
Как это устроено
Браузер не умеет находить сервер по имени helloit.world —
только по IP-адресу. DNS переводит одно в другое: сначала браузер
проверяет собственный кэш, затем спрашивает резолвер провайдера, тот —
корневые серверы, затем сервер зоны .world,
и наконец — сервер, который знает именно про helloit.world.
Итог кэшируется, поэтому повторный визит проходит эту цепочку быстрее
или не проходит вовсе.
Браузерный JavaScript не может напрямую сделать DNS-запрос — это
единственный шаг здесь, который нельзя измерить напрямую со страницы,
только по общей длительности фазы (см. шаг 2).
TCP и TLS-рукопожатие
Реальные замеры
TCP устанавливает надёжное соединение (три пакета: SYN → SYN-ACK → ACK).
Если адрес — https://, поверх сразу
начинается TLS-рукопожатие: браузер и сервер договариваются о шифре и
проверяют сертификат сервера, прежде чем передать хоть байт данных
страницы. Ниже — настоящие цифры по загрузке именно этой страницы,
измеренные Navigation Timing API вашего браузера:
Что проверяет браузер в сертификате: не
«зашифровано ли соединение» (шифрование будет в любом случае), а то,
что сертификат подписан организацией, которой браузер доверяет
(центр сертификации, CA), и что в нём указано именно то доменное
имя, к которому вы подключаетесь. Без этой проверки шифрование не
спасло бы от подмены сервера — трафик был бы защищён от
подслушивания, но не от разговора не с тем сервером.
Let's Encrypt — некоммерческий
центр сертификации, который с 2016 года выдаёт такие сертификаты
бесплатно и полностью автоматически (протокол ACME: сервер сам
доказывает, что владеет доменом, и сам получает сертификат без
участия человека). Сертификаты короткоживущие — около 90 дней — и
переоформляются автоматически. Во многом благодаря этому HTTPS стал
стандартом по умолчанию для всего веба, а не платной привилегией.
HTTP-запрос и ответ
Реальные данные
Дальше браузер отправляет текстовый запрос вроде
GET / HTTP/1.1 и получает ответ:
код статуса (200 — всё хорошо, 404 — не найдено, 500 — ошибка сервера) и
заголовки. Время до первого байта ответа (TTFB) сейчас: —.
А вот настоящие заголовки ответа для этой самой страницы (браузер
специально скрывает Set-Cookie из этого списка даже для своего сайта —
так безопаснее):
Что происходит с этим запросом дальше, уже на стороне сервера — на странице
«Как устроен продакшн»,
вид «Последовательность запроса».
Разбор и рендер
Реальные замеры
Браузер разбирает HTML построчно, строя DOM-дерево, и запускает загрузку
CSS/JS/картинок, которые встречает по пути — часто параллельно, а не
строго по порядку. DOMContentLoaded —
момент, когда дерево готово; load —
когда догрузились уже вообще все ресурсы страницы.
Итоговая шкала
Реальные замеры
Все фазы выше — одной шкалой, как в панели разработчика браузера
(вкладка Network). Обновите страницу и откройте этот шаг снова —
цифры могут отличаться в зависимости от сети и от того, было ли
соединение уже «тёплым».