Frontend | Вопросы собесов: “Что происходит в момент запроса в браузере ? Спросят с вероятностью 3%…”

Что происходит в момент запроса в браузере ?
Спросят с вероятностью 3%

Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий. Рассмотрим основные этапы, происходящие при выполнении HTTP-запроса в браузере:

1️⃣Ввод URL и начало запроса

✅Пользователь вводит URL в адресную строку браузера.
✅Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы.

2️⃣DNS-разрешение

✅Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера.

3️⃣Установление TCP-соединения

После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие:
✅Браузер отправляет SYN-пакет серверу.
✅Сервер отвечает SYN-ACK пакетом.
✅Браузер отправляет ACK-пакет, подтверждая установление соединения.

4️⃣HTTPS и SSL/TLS

✅Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS:
✅Браузер и сервер обмениваются сертификатами и выполняют шифрование данных.

5️⃣Отправка HTTP-запроса

✅Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com

6️⃣Обработка запроса на сервере

✅Сервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц.

7️⃣Получение и обработка HTTP-ответа

✅Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:

          HTTP/1.1 200 OK
     Content-Type: text/html
     Content-Length: 1234

     <!DOCTYPE html>
     <html>
     <head>
       <title>Пример страницы</title>
     </head>
     <body>
       <h1>Добро пожаловать!</h1>
     </body>
     </html>

8️⃣Парсинг и рендеринг страницы

✅Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы.
✅В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки.

9️⃣Выполнение JavaScript

✅После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы.
✅JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки.

🔟Финальная отрисовка

✅После загрузки всех ресурсов и выполнения JavaScript браузер завершает отрисовку страницы. Пользователь видит конечный результат в своем браузере.

Когда пользователь вводит URL в браузере и нажимает Enter, происходит следующее:
1️⃣Браузер проверяет кэш и выполняет DNS-запрос для получения IP-адреса.
2️⃣Устанавливается TCP-соединение и, если используется HTTPS, SSL/TLS-соединение.
3️⃣Отправляется HTTP-запрос к серверу.
4️⃣Сервер обрабатывает запрос и возвращает HTTP-ответ.
5️⃣Браузер парсит HTML, загружает и обрабатывает ресурсы (CSS, JavaScript, изображения), строит DOM и CSSOM.
6️⃣Выполняется JavaScript, что может изменять DOM и CSSOM.
7️⃣Страница рендерится и отображается пользователю.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых