Я разрабатываю веб-сайт на основе исходного кода 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в адресную строку и найдите запись с названием 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(); ?>" />
Он всегда будет обновляться!
РЕДАКТИРОВАТЬ: Конечно, это непрактично для всего веб-сайта, так как вы не добавляете это вручную для всего.
Проверьте это: Как заставить браузер использовать новейшую версию моей таблицы стилей?
Предполагая, что ваш файл 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>
Он обновится при изменении.
Убедитесь, что это не происходит из вашего DNS. Например, у Cloudflare есть он, где вы можете включить режим разработки, в котором он принудительно очищает ваши таблицы стилей и изображения, поскольку Cloudflare предлагает ускоренный кеш. Это отключит его и заставит обновлять каждый раз, когда кто-то посещает ваш сайт.
Попробуйте очистить кеш браузера.
Это расширение Firefox было единственным решением, с которым я мог работать: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
Принятый выше ответ правильный. Однако, если вы хотите периодически перезагружать кеш и используете Firefox, инструменты веб-разработчика (по состоянию на ноябрь 2015 года в пункте меню «Инструменты») предоставляют параметр «Сеть». Это включает в себя кнопку перезагрузки. Выберите Reload для однократного сброса кеша.
Если вы хотите быть уверены, что эти файлы должным образом обновляются Chrome для всех пользователей, тогда вам нужно иметь must-revalidateв Cache-Controlшапке. Это заставит Chrome повторно проверять файлы, чтобы увидеть, нужно ли их повторно загружать.
Порекомендуйте следующий заголовок ответа:
Cache-Control: must-validate
Это говорит Chrome проверить с сервером, есть ли более новый файл. Если есть более новый файл, он получит его в ответ. Если нет, он получит ответ 304 и подтверждение того, что тот, который находится в кеше, обновлен.
Если вы НЕ устанавливаете этот заголовок, то при отсутствии каких-либо других настроек, делающих файл недействительным, Chrome никогда не будет проверять с сервером, есть ли более новая версия.
Вот сообщение в блоге, в котором эта проблема обсуждается дополнительно.
Вместо тега ссылки в html-head к внешнему файлу 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 - оптимально без необходимости перезагружать страницу.
Попробуй это:
link href="styles/style.css?=time()" rel="stylesheet" type="text/css"
Если вам что-то нужно после символа "?" это отличается каждый раз, когда к странице обращаются, тогда это time()будет делать. Постоянно оставлять это в коде - не лучшая идея, поскольку это только замедлит загрузку страницы и, вероятно, в этом нет необходимости.
Я обнаружил, что принудительное обновление таблицы стилей полезно, если вы внесли значительные изменения в макет страницы и доступ к новой таблице стилей жизненно важен для того, чтобы на экране появилось что-то разумное.