Каким образом наличие "? $ {New Date (). GetTime ()}" обновляет изображение в JS

Question

Я смотрел учебник, в котором было показано, что добавление ?${new Date().getTime()} к значению атрибута sr c в теге изображения обновляет текущее изображение новым изображением.

Я сталкивался с этот вопрос , где первый ответ на вопрос следовал той же методике.

Может кто-нибудь объяснить мне обоснование работы этой конкретной техники. Спасибо!

Answer 1

Самое простое объяснение состоит в том, что браузер (и часто сервер) будет кэшировать элементы в памяти, чтобы уменьшить время загрузки страницы. Поэтому, если у вас есть дюжина страниц, на которые все ссылаются /images/logo.png, изображение загружается один раз и сохраняется, чтобы его можно было повторно использовать на каждой странице. Эффективно, верно?

В любом случае, иногда изображения меняются, и вы не хотите, чтобы это произошло, поэтому вы изменяете имя файла. Например, /images/logo.png?15, /images/logo.png?16, /images/logo.png?17 и др. c. Браузер больше не пытается использовать кэшированное изображение, потому что запрос фактически отличается.

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

Answer 2

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

Если браузер видит URL-адрес изображения, изображение которого уже существует в кэше, оно не будет загружать изображение снова - вместо этого оно будет извлекать изображение из кэша браузера. Но если вы измените значение src на значение, которое в кэше равно , а не , оно выполнит другой запрос к серверу. Если сервер изменил изображение в этой конечной точке между начальной загрузкой страницы и изменением sr c, новое изображение на сервере будет загружено и отображено на клиенте.

new Date().getTime() - это просто способ добавить строку, которая определенно еще не существует в кэше браузера.