Как работает Web

Что делает браузер, чтобы загрузить Веб-страницу?

  • account_circle

    Пользователь

    Вводит адрес сайта в поисковую строку браузера.

  • dvr

    Браузер

    Получает адрес. Возьмем для примера https://www.google.com. Вот, что в нем есть:

    • https — это протокол (может быть незащищенный (http) или защищённый (https));
    • google.com - это host, по которому нужно сделать обращение: он представлен доменным именем;
    • /index.html - это адрес ресурса, который нужно получить на веб-сервере.

    Браузер делает разбор адреса. Он знает, что машины понимают только цифры. Поэтому берёт host и на его основе получает IP-адрес (это адрес веб-сервера). Другими словами, происходит преобразование (resolve) доменного имени в IP-адрес. Для этого используется DNS-сервер (Domain Name Server).

    Однако, если ранее адрес уже использовался, то запрос к DNS не делается, потому что эта информация кэшируется. Браузер сначала ищет айпишник в ближайших местах (история подключений, кэш ОС/роутера), и, если находит адрес там, то берет его из локального кэша. Если не находит — отправляет host DNS-серверу.

  • storage

    DNS-сервер

    Находит IP-адрес сайта в адресной книге и отправляет браузеру.

  • dvr

    Браузер

    Получает IP-адрес, и теперь можно установить TCP-соединение с веб-сервером. TCP — это протокол с набором правил, по которым осуществляется соединение. При TCP-соединении обязательно подтверждение получения информации: если подтверждение не получено, то информация отправляется заново.

    Для TCP-соединения есть важная характеристика: порт, по которому оно должно быть установлено:

    • 80 - для http-протокола;
    • 443 - для https-протокола.

    При установке TCP-соединения идет обмен пакетами с флагами ACK/SYN/FIN. Если мы взаимодействуем по https-протоколу, то происходит так называемое трехстороннее рукопожатие TCP (TLS handshake) - это обмен сертификатами, проверка подлинности сертификатов, обмен публичными ключами, т.е. происходит установка доверенного соединения:

    • SYN-пакет: браузер отправляет запрос на соединение;
    • SYN/ACK-пакет: сервер подтверждает получение;
    • ACK-пакет: браузер подтверждает, что получил SYN/ACK-пакет.
  • sync

    Соединение установлено

  • dvr

    Браузер

    Когда соединение установлено, мы переходим к httphttp-части.

    Браузер объясняет серверу, что ему нужно: формирует http-заголовок.

    Это простой текстовый заголовок. Он включает в себя: метод получения информации (GET/POST или другие), URL, версию http-протокола, которая используется клиентом, host, connection (чаще всего close), cookie и т.п.

    Можно отметить, что до версии http-протокола 1.0 не было поддержки виртуальных хостов и нельзя было указать такой заголовок, как host. Начиная с версии 1.0 почти везде используются виртуальные веб-сервера, когда можно на одном веб-сервере хостить несколько веб-серверов, разделенных по хостам. Поэтому в http-заголовке указывается заголовок host и имя хоста, которое, как правило, совпадает с доменным именем.

    После формирования http-заголовка браузер отправляет его серверу.

  • dns

    Сервер

    Веб-сервер получает заголовок и производит обработку, формирует ответ и отправляет браузеру.

    Ответом может быть:

    • в случае успеха — заголовок со status code: 200 и html-страница;
    • в случае ошибки — сообщение об ошибке.
  • dvr

    Браузер

    Если пришел заголовок со status code: 200, браузер берет полученную html-страницу (которая приходит в пакетах данных) и делает парсинг (сбор данных).

    HTML - достаточно сложный язык, он не парсится в один проход. Части парсинга:

    • лексический анализ — выделение лексем, токенов;
    • синтаксический анализ — проверка правильности самого языка;
    • парсинг — формирование дерева распарсенных элементов.

    При парсинге HTML создаются DOM, CSSOM и непосредственно Render tree с набором элементов, на основе которого происходит отображение страницы. Процесс рендеринга — это и есть постепенное отображение контента на экране.

    Если на странице есть скрипты, они могут изменять положение элементов, их размер. В таком случае запускаются дополнительные процессы парсинга.

    Наконец, происходит отображение страницы на основе распарсенной информации.

  • account_circle

    Пользователь

    Видит страницу и взаимодействует с ней.

Запросы в действии

JavaScript дает нам возможность самостоятельно составлять и отправлять запросы на сервер. Чтобы протестировать взаимодействие с сервером и посмотреть на его ответ, сделаем fetch-запрос к открытому API гифок GIPHY и попробуем получить картинку. Подробнее о работе API и fetch-запросах можно прочитать здесь.

Пусть это будет простой GET-запрос без указания дополнительных параметров:

                    
async function loadData() {
    let response = await fetch("https://api.giphy.com/v1/gifs/translate?api_key=вставить_API_Key_с_сайта_GIPHY=cat");
    let data = await response.json();

    try {
        if(response.status === 200){
            // здесь пишем код, который должен вывести на странице гифку, status code и response headers              
        } else {
            throw new Error ("Проверьте корректность запроса.");
        }           
    } catch (error) {
        console.log(error.message);
        // а здесь пишем код, который должен вывести на страницу сообщение об ошибке
    }
}
loadData();

На основе шаблона функции loadData() смоделированы две ситуации:

  • успешный запрос: fetch-запрос составлен верно, вместо фразы "вставить_API_Key_с_сайта_GIPHY" был добавлен актуальный ключ;
  • запрос с ошибкой: а здесь ключ добавлен не был, в таком виде fetch некорректен — запросу не хватает учетных данных.

Чтобы узнать, сработает ли запрос, какой статус и какие заголовки придут с сервера в параметрах ответа response.status и response.headers, нажмите на кнопку "Посмотреть гифку":

Успешный запрос

Запрос с ошибкой

Полезные ссылки

Как работает Web

Что стоит за простой загрузкой веб-странички в браузере

Что делает браузер, чтобы загрузить Веб-страницу? smart_display