Caché del navegador: ¿caché o servidor?

Una página con varios objetos visitada más de una vez. Para cada objeto y cada visita, el navegador decide: servirlo de la caché, revalidarlo con un GET condicional o descargarlo de nuevo. Sigue el árbol de decisión y los mensajes que produce.

Página

El primer objeto es la página HTML; los demás, los objetos que referencia. El servidor fija la frescura de cada uno con Cache-Control.

max-age en segundos. no-cache: se guarda pero siempre se revalida. no-store y «sin frescura»: no se guardan.

Visitas

Cada visita ocurre t segundos después de la anterior. Marca los objetos que han cambiado en el servidor entre medias.

Ejemplos

Practicar

Genera una página y unas visitas aleatorias y oculta las decisiones: para cada objeto de la visita elegida, di qué hace el navegador y qué responde el servidor.

Vista

Exportar

Árbol de decisión

Mensajes de la visita

La caché antes y después de la visita

Supuestos del modelo
  • Toda respuesta 200 OK lleva Last-Modified y su frescura explícita: Cache-Control: max-age=N (fresca N segundos desde que se recibió), no-cache (se guarda, pero se revalida siempre) o no-store (no se guarda). Una respuesta sin información de frescura tampoco se guarda.
  • Un objeto que no está en caché se pide con un GET normal y se responde con 200 OK.
  • Una copia fresca (edad < max-age) se sirve de la caché sin ningún mensaje.
  • Una copia no fresca (edad ≥ max-age, o no-cache) se revalida con un GET condicional: If-Modified-Since igual al Last-Modified de la copia. El servidor responde 304 Not Modified sin cuerpo si el objeto no ha cambiado (la copia vuelve a ser fresca durante otro max-age) o 200 OK con el objeto nuevo si ha cambiado.
  • La página es un objeto más: si está fresca o se revalida con 304, el navegador conoce los objetos incrustados por la copia en caché. Dentro de una visita se trata primero la página y después los objetos en orden, por una conexión persistente sin canalización.
  • El Last-Modified se muestra de forma simbólica como «L·versión»; cada cambio en el servidor sube la versión. Las visitas son instantáneas: el modelo dice qué mensajes se envían, no cuánto tardan. Fuera del modelo: ETag, frescura heurística, proxies.

Sobre esta visualización

Simulador de la caché del navegador para una página web con su HTML base y varios objetos, visitada varias veces. El servidor fija la frescura de cada objeto con Cache-Control (max-age=N, no-cache, no-store o sin información) y toda respuesta 200 lleva Last-Modified. En cada visita, posterior a la anterior en t segundos y con algunos objetos modificados en el servidor, el navegador decide objeto a objeto siguiendo el árbol de decisión: si no está en caché, GET normal y 200 OK; si está y es fresca (edad menor que max-age), se sirve de la caché sin ningún mensaje; si está y no es fresca (o es no-cache), GET condicional con If-Modified-Since, y el servidor responde 304 Not Modified sin cuerpo si no ha cambiado o 200 OK con el objeto nuevo si ha cambiado. La visualización muestra el camino recorrido en el árbol, el diagrama de secuencia navegador–servidor de la visita, la tabla de la caché antes y después (versión, edad, frescura, decisión) y el resumen de mensajes y bytes descargados. El estudiante edita la página y las visitas, reproduce la decisión paso a paso, usa ejemplos preparados, practica con ejercicios aleatorios y exporta el diagrama en SVG o PNG.

Conceptos: caché web, caché del navegador, frescura, Cache-Control, max-age, no-cache, no-store, GET condicional, If-Modified-Since, Last-Modified, 304 Not Modified, revalidación.

Fórmulas:

Arquitectura de Redes I, Sesión 2.3 · Enrique de la Hoz, Universidad de Alcalá · Licencia CC BY-SA 4.0 · Original y catálogo en GitHub · DOI 10.5281/zenodo.23285664