Тема нашей сегодняшней лекции — это браузеры., или еще в некоторой специальной литературе вы можете встретить термин «обозреватель». Для начала давайте вообще посмотрим, какие браузеры сейчас популярны в интернете. Первый браузер — Microsoft Edge. Он является последователем браузера Microsoft Internet Explorer. Следующий браузер — Mozilla Firefox, следующий — Apple Safari. Этот браузер является основным в операционной системе Mac OS. Следующая группа браузеров на основе Chromium, такие, как Google Chrome, Opera, Яндекс Браузер. И наконец, браузер Opera Mini. Каждый браузер состоит из разных компонентов, таких, как пользовательский интерфейс, браузерный движок, движок рендеринга, модуль по работе с сетью, JavaScript-овый интерпретатор и UI бэкенда. Давайте начнем рассмотрение архитектуры браузера с модуля по работе с сетью. Итак, пользователь вводит в адресной строке какой-нибудь адрес. Первое, что делает браузер — это ищет актуальные данные в своем кэше. И если он их там находит, то эти данные просто возвращаются пользователю. Если этих данных там не обнаруживается, то браузеру нужно выполнить некоторый набор манипуляций, чтобы доставить конечное содержимое пользователю. И первая манипуляция — это найти соответствующий IP-адрес нашему URL-у или выполнить DNS Lookup. Для этого браузер обращается к специальному серверу, который называется DNS-сервер — грубо говоря, это таблица, где каждому URL-у сопоставляются IP-адреса — и запрашивает у этого сервиса IP-адрес для нашего URL-а. Итак, IP-адрес получен, и браузер наконец-то может сделать запрос непосредственно на сервер. Сервер возвращает данные, браузер кладет эти данные в свой кэш и наконец возвращает пользователю содержимое, которое он запросил. Это несколько упрощенная схема одного запроса, внутри все несколько сложнее. После того, как браузер выполнил DNS Lookup и получил IP-адрес нашего сервера, браузер выполняет так называемое рукопожатие с сервером или TCP Handshake. Браузер отправляет synchronized пакет, SYN, в ответ получает synchronized acknowledgement пакет — SYN/ACK, и отвечает серверу acknowledgement пакетом ACK. И только после того соединение браузера с сервером можно считать установленным. Браузер делает HTTP-запрос за данными, но сервер отвечает не сразу. На данной схеме вы можете увидеть, что сервер некоторое время думает, и это время обозначено аббревитуатурой TTFB. Она расшифровывается, как time to first byte или время, которое серверу необходимо для того, чтобы сформулировать ответ. Сервер идет за данными в базу данных, в кэши, еще куда-нибудь, потом обрабатывает данные и формирует результирующий HTML, который и отправляет браузеру. На это требуется время. Почему понимание всех этих процессов важно? Давайте взглянем на карту России. Наши пользователи могут сидеть не только возле сервера и получать данные за несколько милисекунд со скоростью света. Они могут, например, находиться во Владивостоке. И вот все вот эти вот хождения одного запроса делаются через 6000 километров. Как вы понимаете, данные будут пользователю приходить не очень быстро. Чтобы помочь браузеру в этом, есть специальная спецификация, которая так и называется — «хинты». Например, мы можем указать в специальном теге, с каким URL-ом браузеру нужно выполнить DNS Lookup или, например, установить соединение, то есть обмен SYN/ACK пакетами. Или например, браузер вообще может запросить данные, но никак их не обрабатывать. Или же, например, браузер может даже эти данные запросить и обработать. Тогда нам нужно подсказать браузеру, как эти данные обработать, за это отвечает атрибут as. Или самое последнее и самое интересное — браузер может не только загрузить, обработать данные, но и отрендерить их. В таком случае, когда пользователь перейдет по данной ссылке, то браузер просто подменит отрендеренный URL в скрытой вкладке на вашу. Мы попробовали воспользоваться этой спецификацией на одном из сервисов Яндекса, на корпоративном блоге. Логично, что пользователи, пришедшие на блог Яндекса, захотят посмотреть первый пост, поэтому мы сделали пререндер первого поста. Но оказалось, что не все так просто, и это не всегда работает. Я общался с разработчиками из Google Chrome, чтобы докопаться и узнать, что есть специальная вкладка, где можно узнать, какие URL-ы браузер предзагрузил, и по какой причине он этого не мог сделать. Расковыряв это, я делюсь с вами этой информацией. Вам нужно вбить в браузере вот такую вот ссылку. В данном видео мы рассмотрели, какие вообще браузеры бывают, и из чего состоит модуль по работе с сетью внутри браузера.
