Я разрабатываю веб-сайт на основе исходного кода Wordpress через XAMPP. Иногда я меняю код CSS, скрипты или что-то еще, и я замечаю, что мой браузер требует времени для внесения изменений. Это заставляет меня использовать несколько браузеров, чтобы обновить их, а если не применять новые стили, я попробую второй, и это всегда так.
Есть ли способ избежать этой проблемы? Иногда я меняю код без предварительного уведомления о предыдущих изменениях.
Нажатие Ctrl + F5 (или Ctrl + Shift + R), чтобы перезагрузить кеш. Я считаю, что Mac использует Cmd + Shift + R.
В PHP вы можете отключить кеш, установив дату истечения срока в прошлом с заголовками:
header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
Кэш Chrome можно отключить, открыв инструменты разработчика с помощью F12, щелкнув значок шестеренки в правом нижнем углу и выбрав "Отключить кеш" в диалоговом окне настроек, например:
Изображение взято из этого ответа.
Введите about:config в строку URL, затем найдите запись под названием network.http.use-cache. Установите значение false.
Если вы хотите избежать этого на стороне клиента, вы можете добавить что-то вроде ссылки ?v=1.x в css файл, когда содержимое файла будет изменено. например, если существует <link rel="stylesheet" type="text/css" href="css-file-name.css">, вы можете изменить его на <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">, это обойдет кеширование.
Если вы можете написать php, вы можете написать:
<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />
Он всегда будет обновляться!
EDIT: Конечно, это не очень практично для всего веб-сайта, так как вы не добавили бы это вручную для всего.
Проверьте это: Как заставить браузер использовать новейшую версию моей таблицы стилей?
Предполагая, что ваш файл CSS foo.css, вы можете заставить клиента использовать последнюю версию, добавив строку запроса, как показано ниже.
<link rel="stylesheet" href="foo.css?v=1.1">
Точка зрения разработчика
Если вы находитесь в режиме разработки (как в первоначальном вопросе), лучший способ - отключить кеширование в браузере с помощью 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" />
Таким образом, вы, как разработчик, должны только обновить страницу, чтобы увидеть изменения. Но не забывайте комментировать этот код в процессе производства, ведь кэширование полезно для ваших клиентов.
Режим производства
Поскольку при работе вы разрешаете кэширование, и вашим клиентам не нужно знать, как принудительно выполнить полную перезагрузку или любой другой прием, вы должны гарантировать, что браузер загрузит новый файл. И да, в этом случае лучший подход, который я знаю, это изменить имя файла.
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
Это обновит, если изменить.
Попробуйте очистить кеш браузера.
Вы можете отключить кэширование с помощью панели инструментов веб-разработчика Firefox.
Убедитесь, что этого не происходит из вашего DNS. Например, Cloudflare имеет его, где вы можете включить режим разработки, где он принудительно очищает ваши таблицы стилей и изображения, поскольку Cloudflare предлагает ускоренный кеш. Это отключит его и заставит его обновлять каждый раз, когда кто-то посещает ваш сайт.
Это расширение Firefox было единственным решением, с которым я мог работать: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
Принятый ответ выше правильный. Если, однако, вы хотите периодически перезагружать кеш, и вы используете Firefox, инструменты веб-разработчика (в пункте меню "Инструменты" по состоянию на ноябрь 2015 года) предоставляют параметр "Сеть". Это включает кнопку перезагрузки. Выберите "Перезагрузка" для кеша "un off off" reset.
Если вы хотите быть уверены, что эти файлы правильно обновлены Chrome для всех пользователей, необходимо выполнить must-revalidate в заголовке Cache-Control. Это заставит Chrome перепроверить файлы, чтобы узнать, нужно ли их повторно выбирать.
Порекомендуйте следующий заголовок ответа:
Cache-Control: must-validate
Это говорит Chrome проверить с сервером и посмотреть, есть ли более новый файл. Если есть более новый файл, он получит его в ответе. Если нет, он получит ответ 304 и гарантию того, что тот, что в кэше, обновлен.
Если вы НЕ установите этот заголовок, то в случае отсутствия каких-либо других параметров, которые делают файл недействительным, Chrome никогда не будет проверять сервер, чтобы узнать, есть ли более новая версия.
Вот запись в блоге, которая обсуждает проблему дальше.
Вместо тега ссылки в html-заголовке на внешний файл CSS используйте php-include:
<style>
<?php
include("style.css");
?>
</style>
Вроде хак, но у меня работает :)
Я решил, что, поскольку браузеры не проверяют наличие новых версий файлов css и js, я переименовываю свои каталоги css и js всякий раз, когда я делаю изменения. Я использую css1 к css9 и js1 к js9 в качестве имен каталогов. Когда я добираюсь до 9, я начинаю сначала с 1. Это боль, но она работает идеально каждый раз. Смешно говорить пользователям печатать.
У меня есть случай, когда мне нужно иметь возможность создавать и изменять свои таблицы стилей удаленно, затрагивая тысячи клиентов, но из-за риска большой нагрузки на сеть я не отключаю кеш.
Поскольку я могу изменять содержимое HTML удаленно, я связываю таблицу стилей с помощью хэш-кода, соответствующего содержимому таблицы стилей.
https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808
Тем не менее, я также использую функцию javascript на стороне клиента, чтобы аккуратно заменять узлы и атрибуты при изменении содержимого HTML, то есть тег ссылки таблицы стилей не будет заменен, только атрибут href изменится.
Этот сценарий прекрасно работает в Chrome, Firefox и Edge в Windows, а также в Chrome для Android, но, к моему удивлению, не всегда работает в веб-клиентах на Android. Поэтому я более или менее ищу что-то, чтобы принудительно запустить/запустить обновление, используя javascript - оптимально без необходимости перезагрузки страницы.
проверьте плагин Cache Buster CSS - это автоматически добавляет случайный номер в URL-адрес таблицы стилей, как и ответ от loler. v = нужно различать каждый раз, когда вам нужен свежий взгляд на css.
http://www.alistercameron.com/2008/09/12/wordpress-plugin-css-cache-buster/
Это также гарантирует, что ваши пользователи получат последний файл CSS, если вы меняете что-либо вживую.
Попробуйте следующее:
link href="styles/style.css?=time()" rel="stylesheet" type="text/css"
Если вам нужно что-то после "?" каждый раз, когда страница обращается к ней, то это будет time(). Оставляя это в своем коде навсегда, это не очень хорошая идея, так как это только замедлит загрузку страницы и, вероятно, не понадобится.
Я обнаружил, что принудительное обновление таблицы стилей полезно, если вы внесли значительные изменения в макет страницы, а доступ к новой таблице стилей имеет жизненно важное значение для того, чтобы на экране появилось что-то разумное.