¿Es necesario anexar querystrings a imágenes en una etiqueta img e imágenes en css para actualizar elementos en caché?

Question

Sé que una práctica común es establecer un tiempo de caducidad en el futuro para css, javascript y archivos de imagen y luego asegurarse de que todos los navegadores obtengan el contenido más reciente tan pronto los archivos cambien agregando una cadena de consulta (o cambiando el nombre del archivo) como esto

de esta <link rel="stylesheet" type="text/css" href="base.css">:

a esto:

<link rel="stylesheet" type="text/css" href="base.css?v=1234"> 

o:

<link rel="stylesheet" type="text/css" href="base_1234.css"> 

Pero, ¿qué pasa con las imágenes a las que se hace referencia en un archivo css?

// Inside base.css 
background: url(/img/logo.png) 

// Is this necessary(?): 
background: url(/img/logo.png?v=1234) 

se /img/logo.png volver a cargar cuando base.css cambia nombre de archivo para base.css?v=1234 base_1234.css o automáticamente

O?

Y también, ¿qué pasa con las imágenes en src para img -etiquetas?

Answer 1

El navegador está realizando estas solicitudes después de determinar una ruta absoluta, por lo que si está 'almacenando en memoria caché' sus activos estáticos de esta manera, debe hacerlo para cada archivo individualmente, sin importar dónde se llame. Sin embargo, puede simplificarlo convirtiéndolo en una variable en el back-end.

Puede agregar la cadena como una variable que solo debe actualizar en un lugar en el back-end, probablemente junto con un preprocesador CSS como LESS o SASS para obtener todas sus imágenes.

O utilice las rutas relativas para su ventaja agregando la versión a la url base (site.com/folder/styles.css => site.com/v123/folder/styles.css). Esto se puede agregar a una variable url base de activos estáticos existente en su aplicación, luego en el servidor puede usar una UrlRewrite para quitar la versión. De esta forma, todas las imágenes a las que se hace referencia de manera relativa desde su CSS también obtienen automáticamente la versión, teniendo el mismo efecto de "protección contra caché".

Puede ser más inteligente y establecer la variable automáticamente como parte de su proceso de construcción como el último hash de confirmación de su sistema de control de versiones, lo que también facilitará la depuración en el futuro.

Answer 2

Desde mi experiencia, el almacenamiento en memoria caché del CSS no es recursivo. Por lo tanto, la cadena de consulta al final de la imagen a la que se hace referencia en css debe detener el caché.

Para estar seguro de que todas las imágenes son frescas, es posible que desee también almacenar en caché con la versión querystring (img.png? V = 1234).

Answer 3

Chrome parece ser el peor del navegador montón por no actualizar su caché (tal vez debido a los nuevos métodos de almacenamiento en caché de predicción se utilizan) y la manera de hacer esto es de hecho con un querystring.

Este website va un paso más allá y utiliza el método simple de JavaScript Date().getTime(); (con o sin jQuery) que se adjunta a todos los img etiquetas.

Otra solución es escribir un código javascript para que el navegador no se recupera la imagen de la memoria caché y las cargas cada vez.

El beneficio de lo anterior es que el cambio de nombre de archivo de imagen individual, por el bien de la cadena de consulta, no es necesario ya que JavaScript maneja esto en una sola pasada.

Si bien utiliza una sola línea de JavaScript para lograr esto, no es tan de gran mantenimiento como rastrear cada elemento img en un archivo CSS grande, lo que puede llevar tiempo y aumentar el tamaño del archivo.