Почему Firefox иногда кэширует мой код CSS и Javascript, даже если он изменился?

на моем сайте продукта Firefox иногда "не обнаруживает" изменения в моем коде CSS & Javascript. Скорее он загружает старые версии, поэтому кажется, что мне нужно очистить кэш. Что мне делать в такой ситуации? Это относится к последней версии Firefox (16.0.1 на момент написания этой статьи.)

редактировать!

Я забыл сказать, что это ошибки для файлов css localhost. Я имел в виду, что есть старый файл js, я обновляю его, загружаю его, и на сервере продуктов firefox думает, что его файл на localhost. Способ включения файлов:

<link rel="stylesheet" href="/xyz.css" type="text/css" />

7 ответов


Если вы используете серверный язык, вы можете использовать трюк. Вы можете добавить строку после .стиль CSS./js. В PHP например:

<link rel="stylesheet" type="text/css" href="/style.css?t=<?= time(); ?>" />

Он изменяет каждую перезагрузку страницы.

взгляните на эту статью о кэш перебора.


вы можете использовать метод под названием "перебор кэша", где вы прикрепляете строку запроса к вашему вызову в файл css/js. Затем вы обновляете строку запроса при каждом обновлении css / js.

пример:

<link rel="stylesheet" type="text/css" href="/styles.css?ver=1" />

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

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

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


вы можете добавить версию в конце css/js, который вы отправляете.

вместо www.foo.com/js/javascript.js отправить www.foo.com/js/javascript.js?v=1 и
Вместо www.foo.com/css/style.css отправить www.foo.com/css/style.js?v=1


  • вы можете использовать мета-тег для принудительного обновления. <meta http-equiv="Cache-control" content="no-cache"> или <meta http-equiv="pragma" content="no-cache">.
  • вы можете принудительно заголовок HTTP:Cache-control: no-cache или Pragma: no-cache.
  • вы можете добавить случайную строку запроса в файлы CSS и JavaScript.

просто нужно очистить кэш или жесткое обновление (Ctrl+F5), я боюсь.

другой вариант-просто изменить имя файла JS или CSS, чтобы FF не распознал его как кэшированный файл (например, переименовать стиль.css в style2.стиль CSS.)


style.css?randomnumber будет asure загрузки