Вникаем в принцип работы HTTP-заголовка

HTTP-заголовки представляют собой строки в HTTP-сообщении, содержащие разделенную двоеточием пару имя-значение.​ Формат заголовков соответствует общему формату заголовков текстовых сетевых сообщений ARPA.​ Они позволяют клиенту и серверу отправлять дополнительную информацию с HTTP запросом или ответом. HTTP-заголовок состоит из его имени, нечувствительного к регистру, за которым следует двоеточие и его значения.​ Пробелы перед значением игнорируются.​

Основные заголовки

Существует несколько основных групп заголовков⁚

• Общие заголовки — применяются как к запросам, так и к ответам, но относятся не к данным, переданным в теле.​
• Заголовки запроса — содержат больше информации о ресурсе, который нужно получить, или о клиенте, который запрашивает ресурс.​
• Заголовки ответа — передаются только в ответ на запрос.​
• Заголовки сущности ⎯ относятся к данным, передаваемым в теле сообщения.​

Примеры HTTP-заголовков

Пример HTTP-заголовка запроса⁚

Пример HTTP-заголовка ответа⁚

Content-Type⁚ application/json ⎯ сообщает клиенту о типе данных в теле ответа.​

Работа с HTTP-заголовками

Веб-приложения могут использовать HTTP-заголовки для управления кэшированием, обеспечения безопасности, управления сессиями и многих других задач.​ Например, заголовок Cookie может использоваться для аутентификации пользователя, а Cache-Control — для управления кэшированием.​

Использование правильных HTTP-заголовков помогает обеспечить безопасность, ускорить загрузку веб-страниц, улучшить производительность и удобство использования веб-приложений.

Изучение и правильное использование HTTP-заголовков является важной частью разработки веб-приложений.​ Понимание их работы помогает создавать более безопасные, производительные и удобные для пользователей приложения.​

Отличное видение того, как должен выглядеть веб-сайт, является источником истории его дизайна. URL не представляет собой веб-страницу, это тип ресурса, например. выписка с банковского счёта. Подумайте о посещении банка.com, и отправляем GET-запрос на /statement. Хотя все выглядит нормально, формат для извлечения не указан. Браузер ответит на ваш запрос, отобразив Accept: text/html. Это может использоваться для указания Accept: text/csv или получения данных в другом формате.

Теперь URL может передавать различные ответы в зависимости от значения заголовка Accept. Любой кэш, хранящий эти ответы, должен осознавать их важность. Вот как сервер обрабатывает это:

Прием переменных

Результат будет определяться значением заголовка Accept в запросе.

Этот механизм практически невозможно использовать в Интернете. Хотя переговоры по содержаниюОпция Accept: text/csv была отличной идеей в теории, но в реальности она не работает. Вот почему этот заголовок так популярен и как браузеры его оценивают. Давайте посмотрим на это.

Текущие варианты использования Vary в веб-браузере

Vary традиционно использовался для согласования содержимого с заголовками Accept, Accept Language и Accept-Encoding. Первые два потерпела жестокий провал. Изменение заголовков Accept-Encoding для доставки сжатых ответов (с использованием Gzip и Brotli, если они доступны) работает отлично. Gzip теперь поддерживается всеми браузерами.

Как эти сценарии могут быть реализованы??

Как лучше всего подобрать изображения к устройствам клиентов?? Браузер можно подстроить под размер экрана. Если нет, изображения будут предоставлены в формате JPEG.

Кэш в и из

Этот браузер может использоваться только одним пользователем. Однако он имеет несколько кэшей.

Некоторые типы кэша могут быть совсем новыми. Понять, что такое кэшированный контент, может быть непросто. Эти кэши достигают следующих целей:

Кэш изображений

Это кэш изображений, которые можно найти на одной странице. Этот кэш хранит несколько изображений и может быть загружен кэшем браузера.

Предварительная загрузка

Он сохраняет все предварительно загруженное содержимое в теге заголовка Link или в теге link rel=>>preload >>. Если пользователь покидает страницу, кэширование предварительной загрузки прекращается.

Кэш API Service Worker

Вы можете хранить только то, что JavaScript говорит Service Worker кэшировать. Кэшированные записи не будут изменены, пока Service Worker не запросит это. Файлы можно кэшировать с помощью Service Worker. Service Worker может работать, даже если пользователь не находится онлайн.

HTTPCache

Только кэш, который работает с заголовками кэша на уровне HTTP (Cache Control). Этот кэш имеет самый широкий диапазон и может использоваться всеми сайтами. Если два сайта загружают один и тот же ресурс на одном сервере, кэш может быть общим.

HTTP/2 Push cache

В этом кэше хранятся объекты, отправленные на сервер, но еще не запрошенные страницей, которая использует соединение. В кэше может храниться дополнительная информация, которая отправляется пользователям после получения основного документа. Браузер может обращаться к кэшу для извлечения нужных ему данных, когда это необходимо.

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

Сервер HTTP/2, например, отправляет CSS с каждой страницей. На этой же странице производится предварительная загрузка CSS с помощью тега "link rel=>>preload >>>>".". CSS может влиять на 3 кэша браузера. Стили сначала сохраняются в кэше H2 push. Браузер загрузит страницу, а затем перенаправит таблицу стилей через кэш HTTP в кэш предварительной загрузки.

Заголовок Variy является валидатором

Что произойдет, если мы добавим заголовок Vary к нашему HTML-коду??

Браузеры не сохраняют несколько вариантов URL-адресов, в отличие от промежуточных кэшей, таких как CDN. Браузеры обычно хранят только один вариант. Если фактические данные изменились, важно не использовать неверные варианты.

Валидатору , Всегда следует принимать во внимание вариативность. URL-адреса используются браузерами для вычисления ключей кэша. Затем браузеры проверяют, соответствует ли запрошенный запрос правилам Vary, содержащимся в кэшированном ответе. Браузеры будут рассматривать запрос как "без кэша" и перейдут к следующему уровню кэша или веб-странице. Браузер заменяет кэшированный ответ на новый, когда получает его. Технически, это еще одна версия.

Что делает Vary

Чтобы продемонстрировать, как работает Vary, я сделал небольшое тестирование. Тест загружает URL-адреса в соответствии с заголовками и проверяет, был ли запрос кэширован.

Чтобы сделать его более совместимым, я просто переключился на измерение времени выполнения запроса. Чтобы увидеть разницу, я намеренно добавил 1-секундную задержку в ответ сервера.

Предварительная загрузка

В настоящее время Google Chrome не поддерживает предварительную загрузку. Предварительно загруженные ответы хранятся в кэше и доступны до тех пор, пока они не понадобятся странице.

Если они могут быть кэшированы по HTTP, ответы также заполняют кэш HTTP на путях кэширования предварительной загрузки. Мы также видим, что объекты, помеченные как Vary, предварительно загружены.

Кэширующие службы API Worker

Переменная работа в браузерах типа CDN. Это означает, что браузеру нужно хранить только одну версию в кэше HTTP и разные версии в кэше API. Firefox (54) делает это, в то время как Google Chrome использует правило валидатора, которое находится в кэше HTTP.

HTTPCache

Vary используется в качестве валидатора основным HTTP-кэшем во всех браузерах.

HTTP/2 Push Cache

Хотя заголовки Vary были замечены браузерами, они не учитываются.

Ошибка: "304 Not Modified"

Если сервер посылает вам ошибку 304, Генерация полей заголовков для включения в ответ 200 (OK).

Какова причина того, что ошибка 304 вернула заголовок Vary?? Когда вы читаете о шагах, которые необходимо предпринять после ошибки 304, цвета становятся более яркими.

Для обновления выберите сохраненный ответ. Кэш Будет использовать все поля заголовка, содержащиеся в ошибке "304 Not Modified". Он используется для замены всех полей заголовка, найденных в сохраненном ответе.

Это было отмечено, но в необычной форме. Они обновляют не только заголовки ответа, но и соответствующие заголовки запроса. Это делается для того, чтобы убедиться, что обновленные кэшированные ответы соответствуют запросу.

Руководство для клиентов

Советы для клиентов Google описывает значения, которые могут меняться по мере того, как пользователи просматривают страницу. В частности:

Соотношение пикселей устройства — плотность пикселей экрана. Этот показатель может отличаться, если используется больше экранов.

Сохранить данные

Если пользователь включил щадящий режим.

Ширина смотровой площадки

В пикселях — ширина используемого в данный момент окна браузера.

Ширина

В физических пикселях ширина ресурса.

У каждого пользователя могут быть разные значения. Ширина может иметь широкий диапазон значений.

Ключ заголовка

Разработанный ключ и подсказки клиента можно использовать вместе. Вот несколько примеров.

Ключ: Viewport-Width;div=50

Ответ будет зависеть от ширины окна браузера. Однако это значение округляется до 50 пикселей.

Ключ: cookie;param=sessionAuth;param=flags

Этот заголовок указывает на использование двух файлов cookie: sessionAuth и flags. Мы можем использовать ответ для следующего запроса, если он не изменился.

Существует два основных различия между ключом и переменной.

Вы можете изменять поля заголовка с помощью клавиши. Это позволит вам изменить файлы cookie.

На момент написания этой статьи ключ не поддерживается ни одним браузером или CDN-сервисом. Вы можете получить аналогичные результаты с некоторыми службами CDN, разбив входящие заголовки на несколько частных заголовков.

Варианты

Однако некоторые заголовки имеют более сложные правила. Рассмотрим два разных запроса, которые имеют разные значения Accept-Language pl.gb или en.мы. Ваш браузер не позволяет вам изменить язык. Вы ограничены английским языком. Мы не можем повторно использовать ответ, если мы отвечаем на запрос на английском языке США. Значения Accept-Language могут отличаться, и поэтому кэш не сможет "достаточно разумно" понять это.

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

Заключение

Мы узнали следующее:

Vary — это валидатор для большинства браузеров. Если вы хотите, вы можете кэшировать различные версии одного и того же URL-адреса. Браузеры игнорируют переменные при отправке ресурсов по HTTP/2. Понимание того, как реализовано кэширование, поможет вам понять влияние на каждый. В настоящее время Vary не очень популярен, но эффективность подсказок для ключей и клиентов начинает улучшаться.

Изменения возможны.