Link css no cache

Как убрать кэширование css и js файлов

При внесении изменений на сайты мы часто сталкиваемся с тем, что содержимое страниц, css-файлов и скриптов (.js) кэшируется браузером и остается неизменным довольно долгое время. Это приводит к тому, что для того, чтобы внесенные изменения отобразились во всех браузерах, нужно приучать клиентов к сложным комбинациям F5 или Ctrl + F5. И время от времени следить за тем, чтобы они нажимались.

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

Однако есть способ, который позволит остаться при прежних именах, и сбрасывать кеширование .css или .js файлов в тот момент, когда это будет нужно нам. И навсегда забыть о Ctrl + F5.

Суть состоит в том, что мы будем приписывать к нашим .css или .js файлам в конце псевдопараметр, который будем менять время от времени, тем самым сбрасывая кэш в браузере.

Таким образом, запись в исходном коде теперь будет выглядеть так:

Где 186485 — произвольная комбинация, которая выведет тот же файл, но браузер интерпретирует его как новый, благодаря псевдопараметру ?186485

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

Содержимое файла param.php может быть произвольным:

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

Чтобы файлы вообще не кешировались, можно в содержимом файле param.php вызвать функцию rand() — которая будет выдавать случайное число каждый раз при загрузке.

То же самое и с картинками: рассмотрим URL вида: http://site.ru/img.jpg?12345 Таким образом, обновив код 12345 на какое-то другое число, мы дадим понять браузеру, что картинку надо обновить, и он загрузит её снова. Однако на практике вряд ли стоит пользоваться данным приёмом для картинок, т.к. возрастает нагрузка на сервер и снижается скорость загрузки страниц.

А что в Joomla?

Здесь за нас уже всё продумали разработчики, и нам лишь следует придерживаться принятого синтаксиса:

JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true)); JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));

Указанный код подключит css файл template.css (либо template.js для файла со скриптами) из папки вашего шаблона. Вместо ‘version’ => ‘auto’ можно установить любое значение, например ‘version’ => ‘1.1’ — на выходе этот параметр будет следовать при подключении файла, после знака вопроса.

Параметр relative => true означает, что система будет пытаться найти указанный файл в папке шаблона. Если укажем relative => false, то потребуется указать полный путь к .css или .js файлу

Важно понимать, что в данном случае ‘version’ => ‘auto’ не будет отслеживать изменения, сделанные в файле.

Чтобы подключаемые файлы вообще не кешировались — можно задать version случайное число через функцию rand(), в итоге будет: JHtml::_(‘stylesheet’, ‘template.css’, array(‘version’ => rand(), ‘relative’ => true));

Источник

Способы по отключению кэширования CSS

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

Кэширование очень тесно связано с браузером, и в итоге легче его отключить. Задайте в настройках браузера хранить кэш CSS один год (что не редкость). И вдруг вам понадобилось изменить стили. В таком случае вам нужно подумать, как очистить кэш и заставить браузер перезагрузить CSS. Ниже представлены несколько вариантов по решению этой задачи.

CSS необходимо кэшировать, это очень важно…

Просто посмотрим на то, как выглядят заголовки для кэширования CSS файлов:

Нам нужны Cache-Control и Expires. Я не эксперт в области конфигурации серверов, обычно я смотрю в H5BP конфиги. Но в нашем случае есть классический способ через Apache/HTAccess:

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Запросы

Сейчас браузеры видят URL с какими-либо запросами, как отдельные файлы и просто обновляют их на свежие копии. Большинство CDN поддерживают такую функцию и рекомендуют ее.

Что-то не так? Измените на это:

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

Скорее всего, вы даже могли бы использовать семантическое версионирование, а также можно задать константы.

Изменение имени файла

Запросы не всегда срабатывают. Некоторые браузеры не различают разные строки запросов, как разные файлы. А некоторое ПО (Squid) вообще не кэширует файлы по строковым запросам. Steve Souders в своей статье рассказывает, почему не стоит использовать строковые запросы. Похожая техника применяется с изменением имени файла. Как в HTML ниже:

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

Сервер будет игнорировать цифры в именах файлов CSS и JavaScript, однако браузер все же будет считать названия файлами и будет пытаться обновить код. Jeremy Keith пользуется Twig и применяет следующий шаблон:

Уверен, что вы можете представить похожий код на любом backend языке (типа ASP). Можно потренироваться с написанием данного скрипта для обновления переменной.

Отключение кэширование основано на обновлении даты

Во время поиска в интернете по поводу отключения кэширования вы наткнетесь на кучу советов, вам будут рекомендовать использовать сервер для проверки последнего обновления кэшированного файла и создать «номер» отключения кэша (номер означает что угодно, что вы можете изменить для обновления кэша).

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

ETag’и

Возможно ETag’и покажутся хорошей идеей, так как большинство из них это информация о том, имеются ли уже у браузера копии файлов. Но большинство советчиков в интернете говорят: «отключайте ETag заголовки». Yahoo говорит:

«Вся проблема с ETag’ами в том, что они создаются с помощью атрибутов, которые делают их уникальными для каждого сервера. ETag’и не совпадут, если браузер получил компонент от одного сервера, и тот пытается проверить компонент на другом сервере. Общая проблема сайтов, построенных на кластерных серверах.»

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

И снова я не эксперт в этой тематике, но рекомендуется отключить их в Apache:

Источник

3 ways to prevent browser stylesheet caching

Here are three ways to make sure that any changes made to your stylesheet, are reflected on your local server. The first time I built a Sinatra MVC app, I had issues with the stylesheet. After importing my CSS files, I could preview changes made to my stylesheets by refreshing my browser. But after a couple of hours, I started to notice that changes made to the stylesheet were not being applied to my project. Later I came to find out that my browser was caching my stylesheets; which is why I was not able to view the changes made to my CSS files. Luckily there are a couple of workarounds for this.

1. Adding a version parameter when importing stylesheet

link rel="stylesheet" href="/stylesheets/main.min.css" /> 

link rel="stylesheet" href="/stylesheets/main.min.css?version=1" /> 

The browser will notice the new version and stop caching the stylesheet. All changes in your stylesheet will be reflected in your browser. The only downside is that this fix is not permanent. Eventually, the browser will cache the stylesheet again(typically every eight hours for me). If this is the case all you need to do is increment the version by one; from ?version=1 to ?version=2 .

2. Disable caching in Chrome

1. Open developer tools; Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).
2. Click on the Network tab, typically located along the top.
3. Click the checkbox for Disable cache right under the Navigation tabs(near to top)

3. Hard reload browser

Instead of refreshing your browser, you will be hard reloading your browser. All browsers have different ways of hard reloading the page. Feel free to check out the link below to find the short cut keys for hard reloading your browser.

Hope this article was helpful!

Источник

Как предотвратить кеширование CSS на веб-странице?

Я учусь разрабатывать xhtml, css веб-страницы. Часто я делаю изменения в CSS, но он не отражается на странице из-за кеширования браузеров, и если я вручную очищаю cahceing, он показывает последние эффекты кода. Есть ли что-то, что я могу добавить в код, чтобы заставить browker не кэшировать материал? Любые советы пожалуйста

Этот вопрос затрагивает многие метатеги, предотвращающие кеширование: stackoverflow.com/questions/1341089/… но лучше всего изменить заголовки, возвращаемые с сервера.

@Matthew: Матфея: Хороший совет, вы должны добавить это в качестве ответа. Минус конечно — вы переворачиваете все кеширование на странице, а не только CSS.

@Matthew: Мэтью: нет, я думаю, что лучший выбор для целей разработки — отключить кеширование в браузере вместо того, чтобы возиться с настройками сервера.

@frenchie: Как всегда, это действительно зависит от вашего сценария. Есть случаи, когда изменение HTML может быть лучше. Например, если вы тестируете совместимость браузера, вам придется изменить настройки во всех браузерах. Или если вы показываете страницу разным людям на разных компьютерах.

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

7 ответов

Вы можете добавить случайный параметр запроса к URL-адресу таблицы стилей (например, с помощью javascript или кода на стороне сервера). Он не будет изменять загружаемый файл css, но это предотвратит кеширование, поскольку браузер обнаруживает другой URL-адрес и не загружает кэшированную таблицу стилей.

Вы можете создать класс с методом GetVersion, который вернет вашу версию приложения (или, например, номер сборки или дату сборки).

Для приложения asp.net в разметке вы можете указать что-то вроде этого:

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

Если вы используете Chrome в качестве браузера разработки, есть 2 варианта:

1) Когда вы удерживаете кнопку страницы перезагрузки на секунду, появится меню и предложит перезагрузить жесткую страницу.

2) В настройках инспекторов вы можете заставить браузер никогда не кэшировать файлы.

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

Источник