Caché de memoria de Chrome vs caché de disco

96

¿Estoy interesado en el caché de memoria de Chrome vs el caché de disco? Utilizo webpack, plugin de fragmentos comunes y genero todos mis archivos con chunkhash.

¿En qué se diferencia la memoria del caché de disco? Cuando recargo mi página, algunos archivos se cargan desde la memoria caché y algunos desde la memoria caché del disco (bundle.js e image.jpg desde la memoria caché y css desde la memoria caché). A veces es diferente. ¿Podemos controlar eso, elegir qué se carga desde dónde? La memoria caché parece ser más rápida que la memoria caché en disco.

google-chrome caching webpack Igor-Vuk
fuente
1
Hola Igor, ¿Esto ha causado problemas de carga con el paquete web? ¿Cómo resolviste eso?
Rejoy
1
No hubo problemas. Esta es solo una funcionalidad de caché del navegador que almacena en caché los archivos del paquete de paquetes web.
Igor-Vuk
Hola Igor, veo que esto es un problema cuando algunos archivos empaquetados se cargan desde el disco y otros desde la memoria. Lanza un error JSONP, cuando eso sucede. Esto ocurre solo en casos raros.
Rejoy
se / SuperUser
chharvey

Respuestas:

74

Como decían sus nombres:

"Memory Cache" almacena y carga recursos hacia y desde la memoria (RAM). Entonces esto es mucho más rápido pero no persistente. El contenido está disponible hasta que cierre el navegador.

"Disk Cache" es persistente. Los recursos en caché se almacenan y cargan desde y hacia el disco.

Prueba simple: Abra Chrome Developer Tools / Network. Vuelve a cargar una página varias veces. La columna de la tabla "Tamaño" le indicará que algunos archivos se cargan "desde la memoria caché". Ahora cierre el navegador, abra Developer Tools / Network nuevamente y cargue esa página nuevamente. Todos los archivos en caché se cargan "desde el caché de disco" ahora, porque su caché de memoria está vacío.

Ruwen
fuente
4
Bueno, no sabía que era tan simple.
Faizan Anwer Ali Rupani
27
¿Cómo determina el navegador qué activos almacenar en la caché de memoria frente a la caché de disco?
chharvey
10
¿Podemos configurar lo que debe almacenarse en la memoria caché?
Igor-Vuk
1
Tengo algunos elementos en mi aplicación angular que se cargan desde el disco cuando lo ejecuto localmente, en producción, estos archivos no se almacenan en caché. Solo el caché de la memoria funciona en el entorno de producción. ¿Saben qué podría causarlo?
Rafael Andrade
@RafaelAndrade Tenga en cuenta que angular proporciona múltiples entornos (en src / environment / *. Ts). environment.prod.ts define su entorno de construcción productiv donde environment.ts define su entorno de desarrollo local. En el entorno de desarrollo local, la mayoría de las veces no desea archivos en caché para que los cambios locales siempre se apliquen a su aplicación.
Ruwen
14

Chrome implementa cachés en muchos niveles de abstracción. En el núcleo está la caché HTTP (navegador), un backend para otros mecanismos de almacenamiento en caché. Generalmente, los cachés se pueden dividir en:

  • Caché HTTP
  • Cachés de trabajador de servicio
  • Caché de parpadeo

Caché HTTP

Cada solicitud que se realiza a través de la red es proxy de HTTP Cache que se adhiere a RFC . Cuando se solicita por primera vez, se sobrescribe la caché. Los recursos están codificados por la URL de origen.

Caché de trabajador de servicio

Para manejar con elegancia los fallos de conexión de red, puede utilizar Service Workers . Los cachés y el almacenamiento en caché se volverían a tomar del disco.

Caché de parpadeo

Blink usa Http Cache como backend en dos modos de creación: en memoria y simple (sistema de archivos). Cuál se usa depende del límite establecido globalmente para los cachés cuánta memoria pueden tomar. Además, el caché del renderizador actual es el que más se comparte. Lo que se almacena en caché son fuentes, imágenes y scripts. Si el uso de la memoria global alcanza un umbral especificado, se usa el backend del sistema de archivos.

Forzar en la memoria caché

Si desea que sus archivos se sirvan desde la memoria que anula el mecanismo predeterminado, puede implementar su propio Service Worker. Con File Api, los recursos se pueden leer y almacenar en un objeto en la memoria. Luego, anular el evento de recuperación suprimiría la red y las lecturas de archivos con contenido servido desde este objeto global.

Dominik G
fuente