внешнее кэширование

внешний интерфейс
❝

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

❞

1. Сильный кеш

❝

Сильный буфер так называемый «сильный» состоит в том, чтобы заставить браузер хранить ресурсы с сервера в течение определенного периода времени, немного принудительный вкус ~ прочный кеш истекает или кэш-контроль, не отправляет запросы, возьмите прямо из кэша , Запросить код состояния, чтобы вернуть 200 (из кэша)

❞

1.1 Истекает (прекращено)

❝

Expires упоминается в HTTP/1.0, пусть сервер устанавливает время истечения для файлового ресурса, как долго это содержимое может считаться последним, позволяя клиенту не проверять до этого времени, подробности MDNкликните сюда

❞
  • Укажите срок действия

Укажите абсолютное время истечения кэша по Гринвичу, если истекает срок действия, необходимо повторно запросить

Expires:Sat, 09 Jun 2020 08:13:56 GMT

1.2 Кэш-Контроль (основной)

❝

Чем они отличаются от сроков действия, упомянутых в предыдущем разделе? Cache-Control можно понимать как расширенную версию expires.Чтобы компенсировать дефекты Expires, он был введен в протокол Http1.1 и имеет более высокий приоритет помимо того, что является мощным.То есть когда Expires и Cache-Control существует одновременно, Cache-Control переопределит конфигурацию Expires, т. е. Cache-Control ( Http 1.1 ) > Expires ( Http 1.0 )

❞

Cache-Control более коннотативен, чем Expires, и имеет больше свойств, включая следующие:

• без кеша: он может кэшироваться локально, может кэшироваться на прокси-сервере, и его необходимо аутентифицировать перед использованием кеша.

• no-store : отключить кеш браузера, можно получить только через сервер

• max-age : Установите время истечения ресурса (эффект такой же, как истечение срока действия)

Пример демонстрации:

// 设置缓存时间为1年
Cache-Control: max-age=31536000
Expires:Sat, 09 Jun 2020 08:13:56 GMT //同时设置两个，Expires会失效

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

❝

🤔️Вам может быть интересно, в чем разница между Cache-Control no-cache и max-age=0?

❞

По сути, это разница между обновлением через браузер и принудительным обновлением, см. следующий раздел.

1.3 Действия пользователя в браузере

❝

Я считаю, что операция, без которой вы не можете обойтись, это F5 (кнопка обновления), но разные операции обновления означают разные реакции

❞

• Ctrl + F5 (принудительное обновление): : заголовок запроса имеет больший контроль кэша: без кэша (запрос на повторную выборку)

• F5 (обновление)/обновление ctrl+R: есть дополнительные заголовки запроса cache-control: max-age=0 (перед использованием кеша необходимо проверить, Expires недействителен)

2. Консультационные кэши

❝

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

❞

2.1 Последнее изменение (Http 1.0)

• Первый раунд: когда браузер запрашивает ресурс сервера в первый раз, сервер устанавливает идентификатор кеша заголовка ответа через Last-Modified, записывает время последней модификации ресурса в качестве значения, а затем возвращает ресурс в браузер

• Второй этап: во втором запросе браузер передает заголовок запроса If-Modified-Since для доступа к серверу, и сервер сравнивает время, переданное в If-Modified-Since, со временем модификации ресурса. он обновлен, сервер вернет новый ресурс и обновит Last-Modified, когда время будет таким же, это означает, что ресурс не был обновлен, сервер вернет код состояния 304, а браузер прочитает ресурс из кеша

//response header 第一回合
Last-Modified: Wed, 21 Oct 2019 07:28:00 GMT

//request header 第二回合
If-Modified-Since: Wed, 21 Oct 2019 07:29:00 GMT

2.2 Этаг (http 1.1)

❝

Сравнение между ETags, упомянутыми в MDN, использует сильный алгоритм сравнения, то есть два файла могут считаться одинаковыми только тогда, когда каждый байт является одинаковым, и это значение хеш-функции определяется файлом.Раздел индекса, размер и последний время модификации получается после хэширования, и следует отметить, что распределенные системы неприменимы, подробнеенажми на меня

❞

• Первый раунд: То же, что и выше, браузер запрашивает ресурсы сервера, но на этот раз вместо Last-Modified для установки флага кэширования заголовка ответа используется Etag. Etag генерируется сервером, а затем браузер кэширует Etag и ресурсы.

• Второй раунд: браузер помещает Etag в заголовок запроса If-None-Match для доступа к серверу.После того, как сервер получит его, он сравнит идентификаторы двух концов.В ответ на чтение ресурса и обновление Etag , браузер прочитает ресурс из кеша.Если они совпадают, это означает, что ресурс не был обновлен, сервер вернет код состояния 304, и браузер прочитает ресурс из кеша.

//response header 第一回合
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

//request header 第二回合
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

Сравнив Last-Modified и Etag, мы ясно видим, что каждый запрос согласованного кеша будет иметь «отношения» с сервером.Первый раунд — это получение данных и идентификации, а второй раунд — это то, что браузер «консультируется». "сервер ли процесс, в котором ресурс был обновлен.

При этом, если два вышеуказанных метода используются одновременно, приоритет Etag будет выше, то есть Etag(Http 1.1) > Last-Modified(Http 1.0)

3. Код состояния кеша

3.1 Код состояния 200 OK (из кеша)

❝

Это то, что браузер не согласовывал с сервером, а кеш браузера использовался напрямую. Производительность лучшая, и нет сетевого запроса. Так что же происходит? Обычно происходит, когда истекает срок действия заголовка max-age или Cache-Control действителен.

❞

3.2 Код состояния 304 Не изменено

❝

Это браузер и сервер «общаются». После определения использования кеша снова используйте кеш, то есть второй раунд сравнения через Etag или Last-Modified, упомянутый во втором разделе. Сравнение между ними согласовано , что означает, что ресурс не обновлен, то сервер возвращает код состояния 304

❞

3.3 Код состояния 200

❝

Оба вышеперечисленных двух кеша терпят неудачу, то есть кеш не кешируется или срок действия кеша не истек, и браузеру необходимо получать самые последние ресурсы, что является наименее эффективным. Одним предложением: истекает ли кеш: Cache-Control (max-age), Expires, действует ли кеш: Last-Modified, Etag

❞

4. Применение кеша

❝

Мы разработали о кехе наиболее распространенным использованием

❞

4.1 Кэшированные приложения в Vue

• держать в живых

❝

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

❞

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

Выборочное кэширование маршрутов

// router.js
export default new Router({
routes:[
   { path: '/test',
    name: 'test',
    component: () => import('@/views/test/test.vue'),
    meta: {
      title: '测试',
      keepAlive: true
    }
  },
  
 // App.vue
 <keep-alive v-if='$route.meta.keepAlive'>
   <router-view></router-view>
</keep-alive>
 <router-view v-if='!$route.meta.keepAlive'></router-view>

кеш компонентов

 <keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>
  • Упаковать и добавить хэш
❝

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

❞

В скаффолдинге vue cli мы можем настроить vue.config.js (по сути, настройку веб-пакета), чтобы установить для скомпилированных и сгенерированных файлов хэш-значение, что означает, что каждый упакованный и скомпилированный файл уникален для предотвращения кэширования. В результате ресурс не обновляется,Официальная документация 🚀

версия vue-cli 3x

// vue.config.js
module.exports = { 
  filenameHashing: true,
  chainWebpack: (config) => {
      config.output.filename('[name].[hash].js').end();
  }
}

4.2 Кэш Nginx

• Конфигурация истекает

Допустим я хочу кэшировать изображения веб-приложения на неделю, тогда в nginx можно настроить следующее👇, ресурсы в течение недели после настройки будут обращаться только к ресурсам браузера вместо запроса Nginx

 location ~ \.(gif|jpg|jpeg|png)$ {
          root  /var/mywww/html/public/
          expires 7d;  //表示把数据缓存7天，d：天，s：秒，m：分
  }
  • установить этаг
 location ~ \.(gif|jpg|jpeg|png)$ {
          root  /var/mywww/html/public/
          etag  off;  // 默认是开启 on
  }

Чтобы узнать больше о Nginx, вы можете прочитать мою последнюю статью«Эти вещи о Nginx»

Добро пожаловать, чтобы указать на вопросы ~

Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~

1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация

2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.

3. Статья размещена на GithubfrontendThingsСпасибо, Стар✨

В этой статье используетсяmdniceнабор текста

Категории