Как я могу запросить, чтобы браузеры всегда обновляли (a.k.a. никогда не кэшировали) определенные элементы страницы, такие как листы CSS?

Question

Я заметил проблему при разработке моих страниц, которая всегда беспокоила меня: хотя Firefox (мой общий браузер dev) всегда обновляет CSS и изображения при их изменении на сервере, Internet Explorer не всегда делает это. Обычно мне нужно обновить страницу в IE, прежде чем она запросит у сервера обновленные версии вещей.

Насколько я понимаю, разве браузер не должен хотя бы проверять временные метки на всех объектах на стороне сервера для каждого запроса, а затем обновлять их на стороне клиента по мере необходимости? Есть ли способ, которым я могу ... не принуждать, но .. "побуждать" браузер сделать это для определенных элементов?

Основная проблема, с которой я столкнулся, заключается в том, что на моих страницах есть некоторый JavaScript, который зависит от того, как CSS инициализируется определенным образом, и наоборот. Когда одно обновляется, а другое нет (очень часто в IE, когда оба находятся на своих собственных внешних страницах), это вызывает путаницу и случайные брызги на странице. Я могу справиться с танцами «обновить страницу» самостоятельно для развития, но я не хочу побуждать своих пользователей «обновлять страницу или что-то еще», когда я собираюсь создать сценарий на сайте.

Любой совет будет принят с благодарностью. Сама страница обновляется без проблем (это PHP), поэтому в худшем случае я мог бы просто выплюнуть CSS и JavaScript в саму страницу, но это действительно ужасно и, конечно, я стараюсь избегать это любой ценой.

Answer 1

Хорошая практика - спроектировать ваш сайт так, чтобы клиенту нужно было извлекать внешний JavaScript и CSS только один раз.

Настройка внешних ресурсов, срок действия которых истекает через год. Добавьте номер версии к каждому имени файла, поэтому вместо «style.css» используйте «style-1.2.4.css», а затем, когда вы хотите обновить CSS клиента, увеличьте номер версии.

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

Answer 2

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

Вместо того, чтобы изменять работу моих сайтов, я просто выработал привычку очищать кэш перед обновлением во время разработки. В Firefox, как вы сказали, это обычно не проблема, но если мне нужно быть действительно уверенным, я использую Shift + Ctrl + Del, Enter (и мои настройки «Очистить личные данные» оставляют только «Кэш»). И в IE есть старый Shift + F5.

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

Answer 3

Добавьте небольшую случайную строку запроса в конце всех URL. Это некрасиво, но работает при разработке. Например:

<link rel="stylesheet" type="text/css" href="/mycss.css?foo=<?php echo rand(); ?>"/>

Вы можете сделать то же самое для скриптов, фоновых изображений и т. Д. (И не забудьте удалить эти вещи, когда ваш сайт заработает;))

Answer 4

Лучше, если вы поставите отметку времени последнего изменения в виде GET-данных в конце источника - таким образом вы будете уверены, что ошибок кеша не будет.

Просто глупо полностью удалить кеш, так как это приведет к более медленным страницам.

Answer 5

Если вы используете apache, в вашем .htaccess для этого файла CSS:

<FilesMatch "mycssfile\.css$">
  Header set Cache-Control: "private, pre-check=0, post-check=0, max-age=0"
  Header set Expires: 0
  Header set Pragma: no-cache
</FilesMatch>

Answer 6

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

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

Answer 7

Браузеры хранят страницы во внутреннем кеше, как правило, в соответствии с инструкциями вашего сервера. Нет, они не обязаны перезагружать файлы, если они выглядят как устаревшие на основании последней проверки. Конечно, когда вы нажимаете reload, они явно перезагружают главную страницу, но их поведение в отношении js и стилей может отличаться.

Я разрабатываю с Safari, который имеет Разработка -> Отключить кэши меню именно по этой причине. Я уверен, что у Firefox есть нечто подобное.