Простой блог о web-технологиях

Очистка кеша css и js файлов на стороне клиента

73
07.01.2019
Большинство разработчиков для своих сайтов используют кеширование файлов. 

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

Кеширование статических файлов на стороне клиента, таких как таблицы стилей (css) и скрипты (js) полезная и даже необходимая вещь, но иногда требуется вносить какие-либо изменения в стили и скрипты и если конечный пользователь уже ранее посещал измененную страницу на сайте, то изменения у него не отобразятся и более того, в ряде случаев съезжает верстка, либо перестают работать какие-либо функции, заложенные в скрипты.

Есть очень простой способ сбрасывать кеш на стороне клиента при изменении ранее кешированных файлов.

Способ заключается в добавлении к пути внешних css/js файлов псевдо параметра вида ?ver=%n, где %n - произвольный набор букв или цифр. В моем примере, представленным ниже значением данного параметра служит набор цифр, равный timestamp времени изменения данного файла:
<link href="/css/style.css?ver=<?= filemtime('./css/style.css'); ?>" rel="stylesheet">

Данный код в итоге преобразует ссылку к виду:
<link href="/css/style.css?ver=1547070420" rel="stylesheet">

Цифры, выделенные красным цветом могут отличаться, в зависимости от времени изменения файла style.css. То есть при следующем изменении и сохранении файла style.css, цифры поменяются. Когда конечный пользователь загрузит страницу, браузер не найдет в кеше style.css и загрузит измененный файл, вновь кешируя его.

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

Данным способом помимо css и js файлов, можно так же сбрасывать изображения, добавляя к ним такой же псевдо параметр с временем изменения файла.
css, js, кеширование
Комментарии
Оставить комментарий
необходимо заполнить выделенные поля
Николай пишет:
10.01.2019
Спасибо за статью, все очень подробно и понятно расписали.