Обход кэширования js/css

Question

[Ambrose]

Всем привет! Хочу задать совсем простой вопрос:

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

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

Answer 1

[slang]

Наиболее простой для Вас вариант, как мне кажется — это, конечно же, использовать GET-параметр после скрипта:

<script src="/js/script.js?1273455236"></script>

Но, не просто параметр, а в этом параметре передавать время изменения файла скрипта в unixtime формате. В такой ситуации у Вас файл обновится у всех пользователей после того, как он будет изменён на сервере. Похожий финт можно сделать и с хешом файла, например MD5, это позволит избежать случаев, когда время изменения сместилось без изменения контента, и, по сути, кешированный вариант всех устроит. Это зависит от Вашего метода деплоя.

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

Comments

[svilkov87]

Вы не могли бы объяснить порядок действий вашего примера? В GET-параметре у нас происходит динамическое изменение версии js-файла, например. А название js-файла тоже нужно изменить на то значение, которое предоставит unixtime. Как мне понять, какое это будет значение? Где я его увижу?

[karpo518]

svilkov87, путь к скрипту нужно формировать динамически. Вот такэто можно сделать средствами php

<script src="/js/script.js?<?= filemtime($_SERVER['DOCUMENT_ROOT'] . '/js/script.js') ?>"></script>

Answer 2

[Евгений Колотилин]

main.js?123
main.css?123
Если файлу передаются параметры (?123), то браузер обязан его загрузить заного.

Comments

[omfg]

Полностью соглашусь, всегда подключаю таким образом:
main.js?v.1.0.2

[Ambrose]

Я верно понимаю, что если постоянно передавать одни и те же параметры, то файл всё равно будет загружаться? Просто я именно с этого и начинал (дописывал ?1 при подгрузке скрипта), но после этого были еще жалобы.

[Dmitry Dedukhin]

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

[Евгений Колотилин]

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

[Ambrose]

Да, пожалуй с unixtime и попробую. Спасибо! :)

Answer 3

[Serator]

А не лучше ли выкинуть из головы все эти анахронизмы (аль даже маразмы), описанные выше, и использовать то, что собственно и было реализовано под вашу задачу, то бишь ETag. Подробнее почитаете в википедии, аль где-нибудь еще (информации достаточно много).

+ в том, что все происходит автоматически и при этом файл кешируется.

Пример использования для ".htaccess":

# Настраиваем ETag на время последнего изменения файла и его размер
FileETag MTime Size

Comments

[Dmitry Dedukhin]

Не подскажете ли, почему гугл не использует ETag в своей CDN?

[Sannis]

А зачем, если у них файлы версионируются по имени и не изменяются?

[kmike]

При использовании ETag клиенту нужно каждый раз делать запрос к серверу, чтобы удостовериться, что данные актуальные. А при использовании «маразмов» — не нужно. Так что описанные выше «анахронизмы» лучше.

[Serator]

Ну-ну, вы сначала разберитесь (кстати, то, что вы написали ниже, это тоже самое, что писали выше, но другими словами). Запрос на сервер будет в любом случае, разница лишь в том, что сервер, в случае успеха, ответит либо статусом 200 и отдаст содержимое, либо 304.

Ах да, по иронии судьбы по вашей же ссылке ниже, скрипты отдаются в том числе и с ETag'ом с djangopackages.com.

Так что как бы не «плюсовали» анахронизмы, ими они и останутся и будут жить до тех пор, пока люди не начнут разбираться в вопросах, а не «копипастином» заниматься…

[kmike]

Еще раз: лучшая практика — выставлять для статики expires на год-другой вперед и потом менять названия файлов. При такой схеме запросы к серверу генерируются только 1 раз, в отличие от ETag, с которыми переспрашивать нужно постоянно (чтобы получить этот Not Modified).

[trevin]

kmike: не в том месте уменьшаете нагрузку на сервер

Answer 4

[Dmitry Dedukhin]

для nginx как-то так

location ~* /static/\d+/ {
   alias /path/to/static;
}

в шаблоне при изменении скриптов/стилей увеличиваете циферку

<script src="/static/123/js/core.js"></script>

Answer 5

[v1z]

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

style.css?1292227150

В Ruby это Time.now.to_i, аналогичные функции есть почти во всех языках.

Answer 6

[Искандер Гиниятуллин]

Имеется константа, напримеп, REVISION которая равна номеру текущей ревизии статики.
Вся статика подключается как /css/REVISION/main.css, /js/REVISION/core.css

В nginx написано как указано выше:

Comments

[Искандер Гиниятуллин]

location ~* /static/\d+/ {
alias /path/to/static;
}

[Искандер Гиниятуллин]

перезаливаете статику, меняете костанту — у вас везде кеш сбрасывается и ОК

Answer 7

[servitpol]

<script src="js/jquery.canvasjs.min.js?v=<?php echo filectime('js/jquery.canvasjs.min.js'); ?>"></script>

Answer 8

[Dmitry Dedukhin]

Если нужно отключить кеширование совсем, то по моему мнению самый надежный способ — это генерация случайного числа как описано выше и добавление заголовка Cache-Control: no-cache, no-store в ответ сервера.

Answer 9

[JeanLouis]

Так же можете использовать http-заголовок Last-Modified

Answer 10

[kmike]

Т.к. технологии реализации в вопросе нет, то напишу, как с этим в django. Для django есть с десяток библиотек, которые этим занимаются: djangopackages.com/grids/g/asset-managers/

После первоначальной настройки все работает автоматически: файл поменялся => на сервере статика пересобирается, пересжимается, к собранному файлу приписывается новый unixtime и в html обновляется путь.

Answer 11

[fenric]

https://anatoly.fenric.ru/development/pravil-noe-o...

Answer 12

[Teleweb developer]

В head добавь:

<head> 
   ... 
   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> 
    <meta http-equiv="cache-control" content="max-age=0" /> 
    <meta http-equiv="Pragma" content="no-cache" /> 
    <meta http-equiv="Expires" content="0" /> 
</head>