Antecedentes: tanto el front-end como el back-end están familiarizados con http. Hoy, vamos a clasificar brevemente la parte del caché de http del caché del front-end. Los detalles son los siguientes:
Caché de front-end:
El almacenamiento en caché front-end se puede dividir en dos categorías: almacenamiento en caché http y almacenamiento en caché del navegador. Hoy nos centraremos en el almacenamiento en caché de http, para que pueda verificar el almacenamiento en caché del navegador usted mismo. La siguiente imagen es un punto de conocimiento general de la caché de front-end:
caché HTTP
1. ¿Qué es la memoria caché http?
El caché Http se refiere a: Cuando el cliente solicita recursos del servidor, primero llegará al caché del navegador. Si el navegador tiene una copia del "recurso a solicitar", se puede extraer directamente del caché del navegador en lugar de el servidor original este recurso.
El caché http común solo puede almacenar en caché los recursos de la respuesta de la solicitud de obtención, pero no puede hacer nada para otros tipos de respuestas, por lo que el caché de solicitud que se menciona más adelante se refiere a la solicitud GET.
El almacenamiento en caché HTTP comienza desde la segunda solicitud. Cuando el recurso se solicita por primera vez, el servidor devuelve el recurso y devuelve los parámetros de caché del recurso en el encabezado de respuesta; cuando el navegador juzga los parámetros de solicitud por segunda vez, directamente 200 si golpea el caché fuerte , de lo contrario, agregará los parámetros de solicitud para pasarlo al servidor en el encabezado de la solicitud para ver si llega a la memoria caché de negociación y devuelve 304 si llega, de lo contrario, el servidor devolverá un nuevo recurso.
1. Clasificación de caché http:
Según sea necesario reiniciar una solicitud al servidor, se puede dividir en (caché obligatoria, caché de negociación) Según si puede ser utilizada por uno o varios usuarios, se puede dividir en (caché privada , caché compartida) Si la caché obligatoria entra en vigor, no lo hará. Necesita interactuar con el servidor nuevamente, y ya sea que la caché de negociación sea efectiva o no, necesita interactuar con el servidor. Aquí hay algunas comparaciones entre el almacenamiento en caché forzado y el almacenamiento en caché negociado:
1.1 Almacenamiento en caché obligatorio
Si los datos en caché no han caducado (es decir, la edad máxima de Cache-Control no ha caducado o el tiempo de caché de Expires no ha caducado), los datos en caché del navegador se utilizarán directamente y no se realizarán más solicitudes. enviado al servidor. Cuando la caché obligatoria entra en vigor, el código de estado HTTP es 200. De esta manera, la velocidad de carga de la página es la más rápida y el rendimiento también es muy bueno, pero durante este período, si se modifica el recurso del lado del servidor, no estará disponible en la página, porque no lo hará. ya no enviar una solicitud al servidor. Esta situación es la que nos encontramos a menudo en el desarrollo, por ejemplo, modificas cierto estilo en la página, lo actualizas en la página pero no tiene efecto, porque usa un caché fuerte, por lo que estará bien después de una operación corta. de Ctrl + F5 arriba. Los atributos de encabezado relacionados con el almacenamiento en caché obligatorio son (Pragma/Cache-Control/Expires)
El tema de la prioridad cuando coexisten Pragma y Cache-Control sigue siendo un poco controvertido. Lo encontré en diferentes artículos: algunos dicen que Pragma tiene una prioridad más alta, y otros dicen que Cache-Control es más alta. Para aclarar este problema, decidí hacer una ola de operaciones prácticas. Primero, usé nodejs para construir un servidor de fondo con el fin de configurar los parámetros de caché. El código específico es el siguiente:
Luego visite en el navegador: http://localhost:8888
son los datos devueltos desde el fondo cuando visita por primera vez:
En la segunda visita:
Finalmente, se concluye que
cuando Pragma y Cache-control coexisten, Pragma tiene mayor prioridad que Cache-Control.
Nota:
Hay dos situaciones para el estado 200 devuelto en el navegador Chrome:
1. desde la memoria caché
(recursos como js, imágenes, fuentes, etc. obtenidos de la memoria/generalmente almacenados en caché con alta frecuencia de actualización)
2. desde caché de disco
(obtener desde disco/generalmente caché js, css y otros recursos con baja frecuencia de actualización)
Estas dos situaciones son una estrategia de almacenamiento en caché de Chrome, por lo que el navegador Chrome responde rápidamente. Otros navegadores devuelven el estado almacenado en caché, sin identificar de dónde se obtuvo el caché.
navegador cromo:
Navegador firefox:
1.2 Caché de negociación
Cuando no hay Cache-Control y Expires en el encabezado de respuesta devuelto por el servidor durante la primera solicitud, o Cache-Control y Expires expiran o su atributo está configurado como no-cache (es decir, sin caché fuerte), entonces el el navegador hace la segunda solicitud La negociación con el servidor se llevará a cabo cuando el recurso se actualice y se comparará con el servidor para determinar si el recurso ha sido modificado o actualizado. Si los recursos del lado del servidor no se han modificado, se devolverá un código de estado 304, que le indicará al navegador que se pueden usar los datos en el caché, lo que reduce la presión de transmisión de datos en el servidor. Si se actualizan los datos, se devolverá un código de estado 200 y el servidor devolverá el recurso actualizado y la información almacenada en caché juntos. Los atributos de encabezado relacionados con la caché de negociación incluyen (ETag/If-Not-Match, Last-Modified/If-Modified-Since) los encabezados de solicitud y los encabezados de respuesta deben aparecer en pares.
El proceso de ejecución del caché de negociación es el siguiente: cuando el navegador envía una solicitud al servidor por primera vez, devolverá los atributos de encabezado del caché de negociación en el encabezado de respuesta: ETag y Last-Modified, donde ETag devuelve un valor hash, Last-Modified Modified devuelve la hora de la última modificación en formato GMT. Luego, cuando el navegador envíe la solicitud por segunda vez, traerá el If-Not-Match correspondiente a ETag en el encabezado de la solicitud, y su valor es el valor del ETag devuelto en el encabezado de respuesta, y el If-Modified- Desde. Después de recibir estos dos parámetros, el servidor los comparará.Si la devolución es un código de estado 304, significa que el recurso solicitado no ha sido modificado, y el navegador puede obtener directamente los datos del caché, de lo contrario, el servidor directamente devolver los datos.
Nota:
ETag/If-Not-Match apareció en HTTP/1.1, principalmente para resolver los siguientes problemas:
(1) La última modificación marcada por Last-Modified solo puede ser precisa hasta el segundo nivel. Si algunos archivos se modifican varias veces en 1 segundo, no podrá marcar con precisión la hora de modificación del archivo.
(2), si algunos archivos se han modificado, pero el contenido no ha cambiado, pero la última modificación ha cambiado, lo que hace que el archivo no pueda usar el caché
(3) Puede haber situaciones en las que el servidor no obtenga con precisión la hora de modificación del archivo, o la hora sea inconsistente con el servidor proxy, etc.
1.3 Caché privado (caché a nivel de navegador)
Los cachés privados solo pueden ser utilizados por usuarios individuales: Cache-Control: Private
1.4 Caché compartida (caché a nivel de proxy)
La caché compartida puede ser utilizada por varios usuarios: Cache-Control: Public
2. ¿Por qué usar el almacenamiento en caché HTTP?
De acuerdo con el estudio anterior, se puede encontrar que los beneficios de usar caché son los siguientes:
1. Reducir la transmisión de datos redundantes y ahorrar tarifas de red.
2. Aliviar la presión sobre el servidor y mejorar considerablemente el rendimiento del sitio web
3. Acelerar la velocidad de carga del cliente
3. ¿Cómo usar la caché HTTP?
En general, los recursos que deben almacenarse en caché incluyen páginas html y otros recursos estáticos:
1. La configuración del almacenamiento en caché de páginas html es principalmente para incrustar etiquetas <meta> en las etiquetas <head>. Este método solo es válido para páginas y no para recursos en las páginas. 1.1
. La configuración para deshabilitar el almacenamiento en caché en las páginas html es la siguiente:
<meta http-equiv="pragma" content="no-cache">
// Las etiquetas que solo son reconocidas por los navegadores IE no necesariamente agregan Pragma al campo de solicitud, pero permitirán que la página actual envíe una nueva solicitud cada vez
<meta http-equiv="cache-control" content="no-cache">
// etiquetas reconocidas por otros navegadores convencionales
<meta http-equiv ="expires" content="0 ">
// Solo el navegador IE reconoce la etiqueta. Este método solo se usa como una marca para informar a IE del tiempo de caché. No puede encontrar el campo Expires en el mensaje de solicitud o respuesta.
1.2. La caché de configuración html es la siguiente:
<meta http-equiv="Cache-Control" content="max-age=7200" />
// etiquetas reconocidas por otros navegadores principales
<meta http-equiv="Expires" content =" lunes, 20 de agosto de 2018 23:00:00 GMT" />
// etiqueta solo reconocida por el navegador IE
2. La caché de recursos estáticos generalmente se configura en el servidor web.Los servidores web comúnmente utilizados son: nginx, apache. La configuración específica no se presentará en detalle aquí, puede verificarla usted mismo.
3. Varias formas de no usar el caché:
3.1, Ctrl + F5 para forzar la actualización, extraerá directamente los datos del servidor.
3.2 Presione F5 para actualizar o el botón de actualización del navegador y agregue Cache-Control: max-age=0 por defecto, es decir, se utilizará el caché negociado.
3.2 No desea utilizar la memoria caché en el navegador IE: abra IE, haga clic en Herramientas->Opciones de Internet->General->Configuración del historial de navegación en la barra de herramientas Seleccione "Nunca" y luego guarde. Finalmente, haga clic en "Eliminar" para eliminar todos los archivos temporales de Internet (los archivos almacenados en caché por IE son archivos temporales de Internet).
3.3 También existe el método de deshabilitar el caché en 1 y 2.
3.4 También hay formas de borrar el caché para otros navegadores
Cuarto, varios puntos de atención en el almacenamiento en caché de HTTP
1. En el caso de un almacenamiento en caché sólido, siempre que el caché no haya caducado, los datos se obtendrán directamente del caché. Incluso si hay un cambio de datos en el lado del servidor, no se obtendrán del lado del servidor. por lo que no se pueden obtener los datos modificados. La solución es: agregue un número aleatorio al recurso modificado para asegurarse de que no se saque del caché.
Por ejemplo:
http://www.kimshare.club/kim/common.css?v=22324432
http://www.kimshare.club/kim/common.2312331.css
2. Intente reducir las solicitudes 304, porque sabemos que la caché de negociación interactuará con el servidor en segundo plano cada vez, por lo que el rendimiento no es muy bueno. Desde el punto de vista del rendimiento, utilice una memoria caché fuerte tanto como sea posible.
3. Bajo el navegador Firefox, usando Cache-Control: no-cache no es válido y reconoce no-store. Esto puede lograr el efecto de otros navegadores usando Cache-Control: no-cache. Entonces, para ser compatible con el navegador Firefox, a menudo se escribe como Cache-Control: no-cache, no-store.
4. Varios atributos de encabezado relacionados con el almacenamiento en caché son: Vary, Date/Age.
Variar:
Variar en sí mismo significa "cambiar", y en el mensaje http, tiende a significar "variar de" (diferente de...), lo que indica qué campo de referencia usará el servidor para distinguir y filtrar la versión en caché.
Existe una dirección de este tipo en el lado del servidor, si es un usuario de IE, devolverá el contenido desarrollado para IE, de lo contrario, devolverá el contenido de otra versión del navegador principal.
Formato: Vary: User-Agent
informa al servidor proxy que necesita usar el campo de encabezado de solicitud de User-Agent para distinguir la versión de la memoria caché, a fin de evitar que la memoria caché pasada al cliente sea incorrecta.
Fecha/Edad:
campos de Fecha y Edad en el mensaje de respuesta: para distinguir si el recurso recibido llega a la memoria caché del servidor proxy.
La fecha es, por supuesto, la hora (en formato GMT) cuando el servidor original envió el mensaje de respuesta del recurso. Si encuentra que la hora de la fecha es bastante diferente de la "hora actual", o si actualiza F5 continuamente y encuentra que el valor de fecha no ha cambiado, significa que su solicitud actual golpeó el caché del servidor proxy.
Age también es el primer campo en el mensaje de respuesta, que indica el tiempo (en segundos) que el archivo existe en el servidor proxy. Si el archivo se modifica o reemplaza, Age comenzará a acumularse desde 0 nuevamente.
caché de navegador
Hablemos de las cachés de navegador más utilizadas: cookie, sessionStorage y localStorage, las principales características de estas tres son las siguientes:
Resumen de este artículo:
1. Para el almacenamiento en caché obligatorio, el servidor notifica al navegador el tiempo de almacenamiento en caché. Dentro del tiempo de almacenamiento en caché, la siguiente solicitud utilizará directamente el almacenamiento en caché. Si no está dentro del tiempo, se ejecutará la estrategia de almacenamiento en caché de negociación.
2. Para el caché de negociación, el Etag y la información de Última modificación en el caché se envían al servidor a través de la solicitud, y el servidor lo verifica. Cuando se devuelve el código de estado 304, el navegador usa directamente el caché.
La siguiente figura es el diagrama de flujo de ejecución del navegador que envía la solicitud http por primera vez y otra vez:
Lo anterior es sobre la intercalación de la memoria caché http.Este artículo se reproduce de kim, con la esperanza de ayudar a todos a entender http.