Заставить браузер обновлять css, javascript и т. Д.


86

Я разрабатываю веб-сайт на основе исходного кода Wordpress через XAMPP. Иногда я меняю код CSS, сценарии или что-то еще и замечаю, что моему браузеру требуется время, чтобы применить изменения. Это заставляет меня использовать несколько браузеров для обновления одного, и если новые стили не применяются, я пробую второй, и он всегда так.

Есть ли способ избежать этой проблемы? Иногда я меняю код, не замечая предыдущих модификаций.


3
Кеш браузеров. Каждый раз, когда вы вносите изменения в CSS, JavaScript и просматриваете обновленную страницу, вы увидите эту проблему. Вы можете принудительно выполнить обновление, нажав CTRL + F5 в браузере, и он получит последнюю версию. Я обнаружил, что Chrome иногда требует эту последовательность пару раз ...
AnAgent

вы также можете очистить кеш браузера программно
Паван


Ответ здесь: Ответ Фермина .
JWC

Ответы:


108

Общее решение

Нажатие Ctrl+ F5(или Ctrl+ Shift+ R) для принудительной перезагрузки кеша. Я считаю, что Mac используют Cmd+ Shift+ R.

PHP

В 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, щелкнув значок шестеренки в правом нижнем углу и выбрав Отключить кеш в диалоговом окне настроек, например:

введите описание изображения здесь
Изображение взято из этого ответа .

Fire Fox

Введите about:configв адресную строку и найдите запись с названием network.http.use-cache. Установите это на false.


Спасибо JamWaffles за подробное описание и спасибо всем за ответы. Большое спасибо.
user1511579

В последних версиях Chrome: CTRL + R.
Аликс Аксель

1
Для Chrome интерфейс, которым вы поделились, немного изменился. Просто нажмите вкладку «Сеть», и вы увидите там флажок.
База Гувенькая 08

5
К вашему сведению: для Opera на Mac это cmd-alt-R
Derwent

52

Если вы хотите избежать этого на стороне клиента, вы можете добавить что-то вроде ?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">обойти кеширование.


1
Хороший момент, но тогда браузер всегда спрашивает о файле. Конечно, сервер вернет «304 Not Modified».
Анджей Йозвик

@ajozwik Я тестировал Firefox 26.0 и Chromium 31.0.1650.57. Как вы и сказали, Firefox действительно делает новый запрос каждый раз, если URL-адрес CSS содержит вопросительный знак (и сервер дает ответ 304 с пустым телом); Firefox не выполняет новый запрос, если URL-адрес CSS не содержит вопросительного знака. Chromium не делает новый запрос даже со знаком вопроса. Наверное, это можно считать ошибкой Firefox.
Jaan

у моих друзей так не получается. Только если имя файла другое. Почему так много голосов?
Гедиминас

Я нашел во многих других местах тот же подход, что и в этом ответе, я считаю, что это работало в прошлом, но больше не работает. Если вы находитесь в режиме разработки, лучший и универсальный подход - отключить кеширование в браузере с помощью метатегов HTML. Смотрите мой ответ ниже.
ePi272314

9

Если вы умеете писать 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(); ?>" />

Он всегда будет обновляться!

РЕДАКТИРОВАТЬ: Конечно, это непрактично для всего веб-сайта, так как вы не добавляете это вручную для всего.


Так не работает! Только если имя файла другое, браузер перезагружается. Или, может быть, с этой подсказкой работают только некоторые браузеры, если она у вас сработала
Гедиминас

8

Проверьте это: Как заставить браузер использовать новейшую версию моей таблицы стилей?

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

<link rel="stylesheet" href="foo.css?v=1.1">

5

Точка зрения разработчика
Если вы находитесь в режиме разработки (как в исходном вопросе), лучший подход - отключить кеширование в браузере с помощью метатегов 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" />

Таким образом, вам, как разработчику, достаточно обновить страницу, чтобы увидеть изменения. Но не забывайте комментировать этот код в процессе производства, в конце концов, кеширование - это хорошо для ваших клиентов.

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


2
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

Он обновится при изменении.


Очень хорошее решение для всех тех проектов, которые не используют веб-пакет или инструмент упаковки, который автоматически добавляет версии к ресурсам.
Ричи Гонсалес

Я не отрицал его, но на сегодняшний день это решение плохо работает в последней версии Chrome, оно все еще загружает предыдущую версию файла JavaScript
Микаэль Майер,

1

Убедитесь, что это не происходит из вашего DNS. Например, у Cloudflare есть он, где вы можете включить режим разработки, в котором он принудительно очищает ваши таблицы стилей и изображения, поскольку Cloudflare предлагает ускоренный кеш. Это отключит его и заставит обновлять каждый раз, когда кто-то посещает ваш сайт.



0

Вы можете отключить кеширование с помощью панели инструментов веб-разработчика Firefox.



0

Принятый выше ответ правильный. Однако, если вы хотите периодически перезагружать кеш и используете Firefox, инструменты веб-разработчика (по состоянию на ноябрь 2015 года в пункте меню «Инструменты») предоставляют параметр «Сеть». Это включает в себя кнопку перезагрузки. Выберите Reload для однократного сброса кеша.


0

Если вы хотите быть уверены, что эти файлы должным образом обновляются Chrome для всех пользователей, тогда вам нужно иметь must-revalidateв Cache-Controlшапке. Это заставит Chrome повторно проверять файлы, чтобы увидеть, нужно ли их повторно загружать.

Порекомендуйте следующий заголовок ответа:

Cache-Control: must-validate

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

Если вы НЕ устанавливаете этот заголовок, то при отсутствии каких-либо других настроек, делающих файл недействительным, Chrome никогда не будет проверять с сервером, есть ли более новая версия.

Вот сообщение в блоге, в котором эта проблема обсуждается дополнительно.


0

Вместо тега ссылки в html-head к внешнему файлу css используйте php-include:

<style>
<?php
include("style.css");
?>      
</style>

Вроде хак, но у меня работает :)


1
Считаете ли вы, что OP может не использовать php?
Орам

0

Я решил, что, поскольку браузеры не проверяют наличие новых версий файлов css и js, я переименовываю свои каталоги css и js всякий раз, когда вношу изменения. Я использую css1 до css9 и js1 до js9 в качестве имен каталогов. Когда я дохожу до 9, я начинаю сначала с 1. Это неприятно, но каждый раз это работает отлично. Смешно просить пользователей печатать.


0

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

Поскольку я могу изменять содержимое HTML удаленно, я затем связываю таблицу стилей с хэш-кодом, соответствующим содержимому таблицы стилей.

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

Тем не менее, я также использую клиентскую функцию javascript для тщательной замены узлов и атрибутов при изменении содержимого HTML, то есть тег ссылки таблицы стилей не будет заменен, изменится только атрибут href.

Этот сценарий отлично работает в Chrome, Firefox и Edge в Windows, а также в Chrome на Android, но, к моему удивлению, не всегда работает в веб-клиентах на Android. Итак, я более или менее ищу что-то, чтобы принудительно / запустить обновление с помощью javascript - оптимально без необходимости перезагружать страницу.


-1

Попробуй это:

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

Если вам что-то нужно после символа "?" это отличается каждый раз, когда к странице обращаются, тогда это time()будет делать. Постоянно оставлять это в коде - не лучшая идея, поскольку это только замедлит загрузку страницы и, вероятно, в этом нет необходимости.

Я обнаружил, что принудительное обновление таблицы стилей полезно, если вы внесли значительные изменения в макет страницы и доступ к новой таблице стилей жизненно важен для того, чтобы на экране появилось что-то разумное.


1
Так не работает! Только если имя файла другое, браузер перезагружается. Или, может быть, с этой подсказкой работают только некоторые браузеры, если она у вас сработала. Голос против
Гедиминас
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.