Эта статья была впервые опубликована в моем личном блогеorxing.topДобро пожаловать
Недавно я написал навигационную станцию для публики.Я модифицировал js и css в первые дни.Поскольку он размещен на кодировании, проблема с кешем браузера действительно ужасна.Я знаю, как очистить кеш, но другие не знают знаете, поэтому я проверил решение в Интернете и подытожу его.
предисловие
Механизм кэширования браузера на самом деле является хорошим механизмом оптимизации, который позволяет избежать повторных запросов к одним и тем же ресурсам, снизить нагрузку на сервер и ускорить вторичное чтение пользователя. Но у всего есть свои плюсы и минусы, наличие кеша приведет к тому, что CSS, JS или другие статические ресурсы не будут обновляться вовремя. Иногда модифицируется html, html вообще не читает кеш, а вот css и js читает кеш, будут какие-то необъяснимые проблемы, а когда дело дойдет до пользователя, то он будет путаться.
Принцип кэширования браузера
Я мало что знаю об этом, но знаю, что оно делится на принудительное кэширование и согласованное кэширование. Когда веб-страница открывается во второй раз, браузер сначала инициирует http-запрос к кешу, если запрошенный ресурс существует в кеше и заголовок запроса ресурсаexpiresа такжеcache-controlВ кеше есть флаг кеша, значит кеш читается по умолчанию.Если кеш недействителен, но кеш все еще существует, на сервер будет отправлен http-запрос, иlast-modifiedа такжеetagДва заголовка запроса проверяют наличие кэша согласования.Если кеш согласования есть, браузер все равно будет читать кеш.
Конечно, если ваш ресурс больше не существует или кеш явно запрещен, то браузер не может использовать кеш, что также является решением проблемы с кешем.
Принудительно кэшировать
Принудительно кэшировать два заголовка запроса,expiresа такжеcache-control
expiresНе очень полезно, это заголовок, предложенный http1.0, который указывает время истечения ресурсов.
а такжеcache-controlПоявляется в HTTP/1.1, имеет более высокий приоритет, чем Expires, а также может указывать время истечения ресурса
Конечноcache-controlЭто не так просто, есть много значений, но чаще всего используются следующие 5 значений.
- общедоступный: весь контент будет кэшироваться (кэшируется как клиент, так и прокси-сервер)
- private: весь контент может кэшироваться только клиентом, значение по умолчанию Cache-Control
- no-cache: клиент кэширует содержимое, но необходимость использования кеша должна быть проверена путем согласования кеша.
- no-store: Весь контент не будет кэшироваться, т. е. не используется ни принудительный кеш, ни согласованный кеш.
- Max-agn = xxx (xxx – числовое значение): содержимое кеша перестанет работать через XXX секунд.
from memory cacheилиfrom disk cache, один загружает кеш из памяти, а другой загружает кеш с жесткого диска.Разница в том, что память работает быстрее.Как правило, сначала читается кеш на жестком диске.Если вы обновите его, он будет прочитан из памяти.Иначе что будет при быстром обновленииСогласовать кеш
При сбое принудительного кеша браузер запрашивает сервер.Если сервер считает, что проблем с использованием кеша нет и ресурс не обновляется, то даже если у кеша есть срок годности, браузер все равно его прочитает. на этот раз сервер возвращает 304. Если ресурс обновлен. Если это так, он запрашивает обновление с сервера и возвращает 200. Как судить, обновляется ли ресурс, стоит полагатьсяlast-modifiedа такжеetagДва заголовка запроса, я не буду говорить об этом здесь
Но обратите внимание, что принудительное кэширование имеет приоритет над согласованным кэшированием, поэтому даже если вы обновитесь, браузер все равно будет читать кеш.Это источник проблемы, решение простое, либо напрямую отключите кеш, скажите браузеру, что не разрешено использовать мой кеш, каждый раз загружаемый с сервера. Либо имя файла изменено, имени нет в кеше, не будет считываться кеш
Решение
На Zhihu есть хороший ответ
Браузер хороший человек (мета), браузер нехороший (номер версии), браузер вами недоволен, хочу вас "обмануть" (md5)
Заголовок метакеша настроен на отключение кэширования
Добавьте следующее содержимое в тег заголовка html, чтобы браузер не читал кеш.
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Cache-ControlДействующий наHTTP1.1
PragmaДействующий наHTTP1.0
ExpiresДействующий наproxies
Но таким образом браузер не может загрузить кеш, когда ресурс не изменен, что сильно влияет на опыт.
js, css плюс номер версии
При запросе js и css добавляйте к ним в конце номер версии.Когда браузер обнаружит, что версия выше, он естественно не будет читать кеш младшей версии.
Номер версии не нужно менять в имени файла, достаточно добавить его в конец при вызове js и css?v=1.0можно, например
custom.css?v=1.0
main.js?v=2.0
Конечно, номер версии также может быть автоматически добавлен случайными числами, но это нарушает исходное намерение номера версии, поэтому браузер не может загрузить кеш, когда ресурс не изменен, что влияет на работу. Метод добавления случайного номера версии заключается в использовании случайной функции.Конечно, это можно сделать, только написав оператор вызова js в js, например
document.write( " <script src='test.js?v= " + Math.random() + " '></s " + " cript> " )
или
var js = document.createElement( " script " )
js.src = " test.js" + "?v=" + Math.random()
document.body.appendChild(js)
Добавить MD5
MD5 эквивалентен идентификационному номеру файла. MD5 каждого файла отличается. Пока один и тот же файл изменяется, MD5 также отличается, поэтому мы можем судить, был ли ресурс изменен с помощью MD5. Конечно, мы не можем судить и добавлять их по одному, это должно быть дело сервера, мы не будем говорить об этом здесь.
Пополнить
Добавьте несколько способов очистки кеша браузера и решения кеша CDN, независимо от того, с какими проблемами вы столкнетесь. Попробуйте очистить кеш
Быстро очистить кеш браузера
Некоторые люди могут не знать, как быстро очистить кеш браузера, здесь я представлю это, только для Chrome
- Ctrl+F5 / Ctrl+Shift+R
Возможно, большинство людей знают, что F5 — это обновление, на самом деле Ctrl+R — это тоже обновление, а Ctrl+F5 / Ctrl+Shift+R — это обновление.не загружать кеш и обновлятьКогда вы нажимаете и удерживаете кнопку обновления левой кнопкой мыши, появляются следующие параметры, и эффект тот же.Очистить кеш и обновить
- Ctrl+Shift+Del
Горячая клавиша, настроенная на очистку данных браузера, может очистить данные браузера, файлы cookie и кэш, т. е. очистить все кэши браузера.
- Консоль отключить кеширование
Это скрыто в настройках сети консоли, что очень полезно для разработчиков, а кеши по умолчанию отключены.
Кэширование CDN
Для более быстрой загрузки сайта я выложил все статические ресурсы на CDN.Поскольку это бесплатный CDN, очистки кеша не существует.При изменении файла может потребоваться несколько часов, чтобы вступить в силу, что очень беда
Единственный способ изменить имя файла
Суммировать
Или процитируйте фразу на Жиху
Полностью отключать кеширование неправильно. Кэширование — это функция браузера, а не ошибка
Да, кеширование очень важно, его нельзя полностью запрещать, лучше всего добавить номер версии, когда вы модифицируете файлы js и css, добавление номера версии является естественным.