Как решить загадки кеширования

  1. Различать страницы данных и URL-адреса Ajax-данных
  2. Остерегайтесь самоподписанных сертификатов SSL

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

Тем не менее, это также может быть причиной странных причуд веб-приложений, если вы не очень осторожны

Кэширование контролируется кодом состояния HTTP и заголовками Last-Modified, Etag и Cache-Control, возвращаемыми при каждом запросе. Для последующих запросов на тот же URL, браузер / прокси будет:

  1. получить предыдущие данные из собственного кэша
  2. попросите сервер проверить, изменились ли данные, или
  3. сделать свежий запрос.

Заголовок Cache-Control в первую очередь определяет это действие. Можно установить до трех значений, разделенных запятыми:

нет магазина или нет кеша
no-store останавливает браузер и все прокси-серверы кэшируют возвращенные данные. Поэтому каждый запрос влечет за собой возвращение на сервер.

Альтернатива - отсутствие кэша. Браузер / прокси-сервер отправит запрос на сервер и вернет Last-Modified (дата / время) и / или Etag (хэш / контрольная сумма ответа) в заголовке. Они присутствуют в последующих запросах, и, если ответ не изменился, сервер возвращает статус 304 Not Modified, который инструктирует браузер / прокси-сервер использовать свои собственные кэшированные данные. В противном случае новые данные передаются обратно со статусом 200 OK.

публичный или частный
Установка Cache-Control на public означает, что ответ одинаков для всех, и данные могут кэшироваться в хранилищах браузера или прокси. Это поведение по умолчанию, поэтому его не нужно устанавливать.

личные ответы предназначены для одного пользователя. Например, URL-адрес https://myapp.com/messages возвращает набор сообщений, уникальных для каждого вошедшего в систему пользователя, даже если оба они используют один и тот же URL-адрес. Поэтому браузер может кэшировать ответ, но кэширование прокси-сервера не разрешено.

максимальный возраст
Это указывает максимальное время в секундах, в течение которого ответ остается действительным. Например, max-age = 60 указывает, что браузер / прокси-сервер может кэшировать данные в течение одной минуты, прежде чем сделать новый запрос.

Ваш сервер, язык и структура часто управляют этими настройками, поэтому вам редко приходится возиться - но вы можете. Предположим, вы хотите кэшировать JSON-ответ отдельного пользователя на Ajax-запрос в течение 30 секунд. В PHP:

заголовок ('Cache-Control: private, max-age = 30'); echo json_encode ($ data);

или маршрутизатор Node.js / Express:

res .set ('Cache-Control', 'private, max-age = 30') .json (данные);

Различать страницы данных и URL-адреса Ajax-данных

Установка заголовков HTTP может быть недостаточно, потому что браузеры работают немного по-другому, когда вы нажимаете кнопку «Назад».

В Firefox и Safari при нажатии кнопки назад попытка отобразить предыдущую страницу в ее последнем известном состоянии - при условии, что URL был изменен с обновленным #hash, или путем перехвата действий с история API событий ,

В Chrome и Edge при нажатии на предыдущую страницу предыдущая страница отображается в ее начальном состоянии - хотя ваш JavaScript будет инициализирован и, возможно, при необходимости изменит DOM.

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

  1. Пользователь заходит на страницу по адресу http://myapp.com/list/
  2. Отправка формы для изменения фильтров или перехода на новую страницу изменит URL-адрес и сделает новый запрос - например, http://myapp.com/list/?search=bob&page=42. Система работает в любом браузере с или без JavaScript.
  3. Мы представили улучшения JavaScript, поэтому полное обновление страницы не требуется. Код перехватывает отправку формы и историю задних / следующих событий, поэтому, пока URL-адрес все еще изменяется, приложение выполняет Ajax-запрос в фоновом режиме.
  4. Запрос Ajax вызывает тот же URL-адрес, например http://myapp.com/list/?search=bob&page=42, но устанавливает для заголовка HTTP X-Requested-With значение XMLHttpRequest (выполняется jQuery и всеми хорошими библиотеками Ajax). Сервер распознает этот заголовок - поэтому вместо возврата HTML-кода полной страницы он возвращает данные записей в кодировке JSON. Наш JavaScript использует это для обновления DOM.

Таким образом, наш сервер может возвращать HTML или JSON для одного и того же URL-адреса в зависимости от состояния заголовка X-Requested-With запроса. К сожалению, это может вызвать проблемы с Chrome и Edge, потому что HTML или JSON могут быть кэшированы.

Предположим, что вы случайным образом перемещаетесь по списку записей, и по адресу http://myapp.com/list/?search=bob&page=42 вы нажимаете ссылку на другую (не указанную в списке) страницу, а затем кнопку возврата в браузере, чтобы вернуться. Chrome просматривает свой кэш, видит данные JSON для этого URL и представляет их пользователю! Нажатие на обновление решит проблему, потому что запрос будет сделан без заголовка X-Requested-With. Что еще более странно, так это то, что Firefox работает должным образом и восстанавливает текущее состояние страницы.

Исправление: убедитесь, что ваша страница и URL-адреса данных никогда не совпадают. При переходе по адресу http://myapp.com/list/?search=bob&page=42 вызов Ajax должен использовать другой URL-адрес: он может быть простым, например http://myapp.com/list/?search=bob&page=. 42 & Ajax = 1. Это гарантирует, что Chrome может кэшировать запросы HTML и JSON по отдельности, но JSON никогда не отображается, поскольку URL-адрес Ajax никогда не отображается в адресной строке браузера.

(Примечание: пожалуйста, не используйте этот пример как оправдание, чтобы избежать прогрессивное улучшение ! Это может повлиять на JavaScript-зависимое одностраничное приложение, особенно на те, которые предоставляют ссылки на внешние URL-адреса.)

К сожалению, есть еще одно осложнение ...

Остерегайтесь самоподписанных сертификатов SSL

Остерегайтесь самоподписанных сертификатов SSL

В идеале ваше приложение использует зашифрованный протокол HTTPS. Однако нет необходимости приобретать SSL-сертификаты для всех 57 членов вашей команды, поскольку вы можете использовать поддельный самозаверяющий сертификат и нажимать кнопку « Продолжить» всякий раз, когда браузер жалуется.

Имейте в виду, что Chrome (и, вероятно, большинство браузеров на базе Blink) отказывается кэшировать данные страницы при обнаружении поддельного сертификата. Это похоже на установку Cache-Control на no-store при каждом запросе.

Ваши тестовые сайты будут работать точно так, как ожидается, и вы никогда не столкнетесь с такими же проблемами URL страниц / данных, описанными выше. Кеш никогда не используется, и все запросы возвращаются на сервер. То же приложение на реальном сервере с настоящим сертификатом SSL будет кешировать данные. Ваши пользователи могут сообщать о странных ответах JSON от Chrome, которые вы не сможете воспроизвести локально .

Это своего рода кошмарные проблемы, которые продолжают мешать веб-разработке! Я надеюсь, что вы нашли этот обзор полезным. Не стесняйтесь делиться своими собственными кошмарами в комментариях. Мы все в этом вместе …

Похожие

Как открыть художественную студию для детей
В этом году я получил много писем о том, как открыть художественную студию для детей. Хотя я ценю добрые намерения, стоящие за этими письмами, они часто заставляют меня задуматься. Я имею в виду, как я могу говорить о 20-летней
Как обновить прошивку вашего роутера Eco-wifi
Чтобы оставаться защищенным от атак на известные уязвимости безопасности в прошивке маршрутизатора, вам необходимо постоянно обновлять прошивку. Пожалуйста, проверяйте эту страницу регулярно, чтобы увидеть, доступна ли новая версия. НОВОСТИ *** Май 2018 г. - доступна прошивка JRS Eco-wifi V4.1. Содержит исправления критических уязвимостей: CVE-2017-14491 - CVE-2017-14496 (Dnsmasq),
Lumia 630 на тесте. Как я сломал Windows Phone
Я напишу это, пока все свежо в моей голове, и скажу почему. Этот сайт был создан на задней панели устройства Microsoft Smartphone 2002 под названием Orange SPV. В течение многих лет я был одержим смартфонами и карманными ПК от Microsoft. Однако, когда появился iPhone и популярность Android выросла, Microsoft, казалось, застаивалась. Между Windows Mobile 6 и 6.1 не было никакого реального прогресса, и те надежные бизнес-пользователи, которым всегда гарантировались пользователи Windows
Как вставить смайлики в icq
Программы обмена мгновенными сообщениями в том числе «аська» сейчас используется практически всеми пользователями Интернета. Мы пишем друг другу, отправляем файлы, узнаем, когда человек появился в сети Также
Windows 8 Professional уже для студентов. Покажем, как его полировать
Windows 8 Professional на платформе DreamSpark должна была появиться 25 августа. Однако Microsoft преподнесла нам приятный сюрприз и позволила студентам технических факультетов загрузить свою систему сегодня. Поскольку я принадлежу к этой группе, я решил сделать это немедленно. Каждый студент получил две копии системы. Один - 32-битная версия, а другой - 64-битный. Обе системы на английском и работают без проблем. При установке системы
Испытайте косметические новинки с клавой бесплатно!
Обычно мы проверяем, как работает косметика. Теперь мы предлагаем поменяться ролями - станьте нашими тестерами! Мы вышлем вам самые интересные косметические новинки для вас бесплатно. В свою очередь, мы хотим знать только ваше мнение о них. Проверьте, как получить косметику для тестирования! Правила просты: раз в месяц мы даем вам самые интересные косметические новинки для вас - вы тестируете их некоторое время, а затем присылаете нам свое мнение о косметике, которую вы получили. В
Как один игрок CS: GO взял хакеров в свои руки
Обман в CS: GO - это небольшая подотрасль, трудно убиваемая паразитирующая на коже одна из самых популярных игр для ПК. Некоторые дурные скважины выходят из строя, избегая уведомления системы VAC как можно дольше. Другие используют обман как прибыльное предприятие , предлагая премиальные программы и услуги. Некоторые профессионалы даже
Как обмануть и взломать Flash-игры
Почти всем нравится время от времени играть в маленькие игры, будь то раунд пасьянсов Windows или последний Call of Duty или Age of Empires. Еще одна очень популярная область игр - это мир игр на основе Flash, в которых используется Adobe Flash Player из вашего веб-браузер бежать. Это особенно популярно
Как получить простое и легкое приложение YouTube Go в любой стране
YouTube хорош, но только если у вас есть постоянное соединение для передачи данных и неограниченная пропускная способность. Это норма для городских жителей богатых стран, но не для большинства людей на планете Земля. Вот почему Google
Справка Trumba: Добавьте ссылки на карту к событиям
... URL-адреса в поля « Описание» или « Веб-ссылка» в форме « Информация о событии» . Для получения дополнительной информации о ссылках в поле Описание см. Редактор HTML , Если вы импортируете события, которые содержат проверяемые местоположения, ссылки на карты не добавляются автоматически. Вы должны открыть каждое событие и вручную
ActiveXperts SMS Messaging Server
ActiveXperts SMS Messaging Server - это система обмена сообщениями для отправки, получения и обработки SMS и сообщений электронной почты. Система обмена SMS-сообщениями для создания пользовательских приложений на основе SMS. Автоматически отправлять, получать и обрабатывать сообщения Открытая система, API и структура базы данных задокументированы Работает как служба в Windows 2019/2016/2012 (R2) / 2008 (R2) / 10/8/7 в 32- или 64-разрядной версии

Комментарии

Как вы работали с декором, чтобы соответствовать вашему уникальному стилю?
Как вы работали с декором, чтобы соответствовать вашему уникальному стилю? Я очень приватен в своем собственном пространстве, так как большая часть моей жизни транслируется онлайн. Мне нравятся простые и нейтральные цвета с большим количеством текстур. Но особенность в моем доме - это всегда искусство. Я люблю смелое, сильное искусство, у которого есть мнение. 7. Обсудите нас через один из ваших последних проектов. Что вы делали и что послужило
Разумеется, всем интересно, как это делается на радио; даже люди с телевидения спрашивают: «А как это?
Разумеется, всем интересно, как это делается на радио; даже люди с телевидения спрашивают: «А как это?» И она так: «Нет, ты сегодня садишься в эфир. Мальчик нам не подходит. Так ты когда придешь? ». Я говорю: дай я доделаю есть ... И так разволновалась, что высыпала всю чашку риса, ризотто было даже слишком много - полная чаша :-). Я пришла. Артем Самойлов сказал мне волшебную фразу, которую я, наверное, не забуду
Как насчет?
Как насчет? Мы уже предлагаем. Идеальный подарок для папы - фотокнига из хобби, фотокнига с любимыми воспоминаниями Ваш папа, хотя он иногда не показывает это, чувствительный парень. Ему нравится собирать воспоминания и часто возвращаться к ним. У него наверняка много фотографий, на которых он просто счастлив. Независимо от того, представляют
КАК СДЕЛАТЬ ХОРОШЕЕ ЧЕРНОЕ И БЕЛОЕ ФОТО?
КАК СДЕЛАТЬ ХОРОШЕЕ ЧЕРНОЕ И БЕЛОЕ ФОТО? Не используйте функции камеры по умолчанию. Опция «черно-белый», доступная в камере, является несовершенным инструментом, и эффект будет довольно плоским. Вы достигнете намного лучшего эффекта, используя соответствующие графические программы для обработки ваших фотографий. Убедитесь, что у вас хорошее освещение при съемке. Только тогда вы достигнете правильного контраста и избежите зернистости. Не силой. Не каждую картинку
Как использовать iPad Split View?
Как использовать iPad Split View? Активировать Split View очень просто. Он работает так же, как Slide Over: Откройте приложение и перетащите из док-станция для iPad второе приложение о вашем текущем приложении. Затем отпустите приложение, после чего оно будет переведено в режим Slide Over. В верхней части экрана Slide Over вы найдете строку. Потяните эту линию вниз, чтобы разделить изображение
1. Как вы оцениваете производительность продукта?
1. Как вы оцениваете производительность продукта? 2. Эффективно ли набор предотвращает сияние кожи и уменьшает видимость дефектов? 3. Как вы оцениваете консистенцию крема? Хорошо ли впитывается и подходит для макияжа? 4. Перечислите самые важные плюсы и минусы продукта. Ознакомьтесь с Правилами Акции >>>
Как создать фотокнигу?
Как создать фотокнигу? Это очень просто. Вам не нужно скачивать какие-либо программы. Вы будете делать все онлайн на сайте pixbook.pl/fotoksiazka-lux У вас есть более ста готовых шаблонов фотокниг. Просто зарегистрируйтесь на сайте, выберите один из них, добавьте фотографии и все готово! Теперь все, что вам нужно сделать, это разместить заказ. Ваша фотокнига LUX будет завершена в течение 4 рабочих дней.
Q: Как я могу стать Золотым Участником?
Q: Как я могу стать Золотым Участником? Если вы решите подписаться или продолжить подписку на Star Trek Online, вы автоматически станете золотым участником. Если вы являетесь пожизненным подписчиком, вас также считают золотым участником. Если вы не являетесь золотым участником, но хотели бы стать им, вы можете подписаться через страницы управления учетной записью на этом официальном веб-сайте. В: В настоящее время я постоянный или пожизненный подписчик Star Trek
Как насчет того, чтобы добавить мышь к миксу сейчас?
Как насчет того, чтобы добавить мышь к миксу сейчас? Внедрение USB HID-мыши требует еще нескольких функций, но все равно это очень просто. Класс HID Arduino предоставляет пять функций, которые можно использовать для реализации мыши: Mouse.move (x, y, wheel) - эта функция указывает компьютеру перемещать мышь на определенное количество пикселей вдоль оси x , y и / или колеса . Каждая переменная может иметь любое значение в диапазоне
Как произошло это пренебрежение?
Как произошло это пренебрежение? (Опять же, быстро из обсуждения в фейсбуке) .. долгая история, я буду ждать позиции нынешнего совета Game Technologies SA фирма прокомментировал
Как можно отреагировать на то, что кошки не милые животные?
Как можно отреагировать на то, что кошки не милые животные? Кошки милые животные. Как можно спорить с кем-то, кто сказал, что кошки - уродливые животные. Кошки милые животные . Как можно исправить то, что кошки - милые овощи. Если вы не акцентируете внимание на определенном слове, вы должны использовать <i>. Элемент i более уместно

Com/list/?
Com/list/?
Com/list/?
Com/list/?
Com/list/?
Как вы работали с декором, чтобы соответствовать вашему уникальному стилю?
Разумеется, всем интересно, как это делается на радио; даже люди с телевидения спрашивают: «А как это?
Так ты когда придешь?
Как насчет?
КАК СДЕЛАТЬ ХОРОШЕЕ ЧЕРНОЕ И БЕЛОЕ ФОТО?

Комментарии запрещены.