September 7th, 2021

JavaScript: предотвращение кэширования файла

Забавная ситуация.

В процессе решения задачи «Загрузка видимых изображений» к подразделу 3.6 «Прокрутка» второй части учебника по JavaScript наткнулся на заданной HTML-странице на такой код на языке JavaScript:
// отключение кеширования
// эта строка должна быть удалена в "боевом" коде
realSrc += "?nocache=" + Math.random();

В переменной realSrc изначально содержится строка с URL (вики) картинки. То есть после вышеописанной обработки в переменной realSrc будет содержаться строка, представляющая из себя что-то вроде такого:
https://ru.js.cx/clipart/solar/sun.jpg?nocache=0.5624415985816054

После этого эта строка в рассматриваемом скрипте записывается в свойство src HTML-элемента img.

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

В итоге, как оказалось, дело тут не в передаче параметра на веб-сервер. Вместо идентификатора nocache в данном случае можно вообще вписать что-нибудь другое, например, идентификатор dummy или другой набор букв.

Дело в том, что для браузера при загрузке данного изображения не будет иметь значения, какие параметры и с какими значениями посланы на веб-сервер. Браузер в любом случае указанное изображение загрузит успешно (если, конечно, оно есть на веб-сервере по указанному URL). Например, следующие три строки с URL картинки приведут к загрузке одной и той же картинки, несмотря на то, что в этих строках разные значения параметра nocache:
https://ru.js.cx/clipart/solar/sun.jpg?nocache=0.5624415985816054
https://ru.js.cx/clipart/solar/sun.jpg?nocache=0.9871979099841544
https://ru.js.cx/clipart/solar/sun.jpg?nocache=0.7375589120759105

Зато для работы кэша браузера разница между этими тремя строками имеет значение! Если каждый раз при загрузке заданной HTML-страницы URL картинки будет меняться (это, как раз, и обеспечивается вышеописанным фрагментом скрипта на языке JavaScript), браузер будет считать, что каждый раз загружается абсолютно новая картинка (этот прием можно применять не только к картинкам, но и к любым файлам) и поэтому будет загружать ее не из своего кэша, а с исходного веб-сервера.

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

Как обычно, спасибо порталу «Stackoverflow.com» за прочистку мозгов:
https://stackoverflow.com/a/729623/16458042