¿Cómo aprender habilidades de desarrollo front-end web? ¿Cómo entender el caché del navegador? La memoria caché web se refiere a una copia de un recurso web (como páginas HTML, imágenes, JS, datos, etc.) existente entre el servidor web y el cliente (navegador). Una excelente estrategia de almacenamiento en caché puede acortar la distancia de los recursos de solicitud de la página web y reducir el retraso, y debido a que el archivo de caché puede reutilizarse, también puede reducir el ancho de banda y la carga de la red. A continuación, el editor de Qian Feng le dará una breve introducción.
¿Qué hace el almacenamiento en caché web?
1. Reduzca el consumo de ancho de banda de la red. Independientemente de los operadores o usuarios del sitio web, el ancho de banda representa dinero, y el consumo excesivo de ancho de banda solo hará que los operadores de red sean más baratos. Cuando se usa la copia de caché web, solo se generará un tráfico de red mínimo, lo que puede reducir efectivamente los costos operativos.
2. Reduzca la presión del servidor. Después de establecer el período de validez de los recursos de la red, los usuarios pueden reutilizar la memoria caché local para reducir las solicitudes al servidor de origen e indirectamente reducir la presión sobre el servidor. Al mismo tiempo, los robots rastreadores de los motores de búsqueda también pueden reducir la frecuencia de rastreo según el mecanismo de caducidad, y pueden reducir efectivamente la presión sobre el servidor.
3. Reduzca el retraso de la red y acelere la velocidad de apertura de la página. El ancho de banda es muy importante para los operadores de sitios web personales, y para las grandes compañías de Internet, a veces puede no importarle realmente debido a la gran cantidad de dinero. ¿El almacenamiento en caché web todavía funciona? La respuesta es sí. Para los usuarios finales, el uso del almacenamiento en caché puede acelerar significativamente la velocidad de apertura de la página y lograr una mejor experiencia.
Reglas de almacenamiento en caché del lado del navegador
Para el almacenamiento en caché del lado del navegador, estas reglas se definen en el encabezado del protocolo HTTP y la etiqueta Meta de la página HTML. Estipulan, respectivamente, a partir de dos dimensiones de frescura y comprueban el valor si el navegador usa directamente la copia en la memoria caché o si necesita ir al servidor de origen para obtener la versión actualizada.
1) Frescura (mecanismo de caducidad): es decir, el período de validez de la copia en caché. Una copia en caché debe cumplir cualquiera de las siguientes condiciones, y el navegador considerará que es válida y lo suficientemente nueva como para obtener una copia directamente del caché y renderizarla:
Contiene información completa de encabezado de control de tiempo de vencimiento (encabezado de protocolo HTTP) y todavía está dentro del período de validez;
El navegador ya ha utilizado esta copia en caché y ha verificado la actualización en una sesión.
2)校验值(验证机制)：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag(Entity Tag)，它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。
哪些请求不能被缓存?
1)HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache，或Cache-Control:max-age=0等告诉浏览器不用缓存的请求;
2)需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的;
3)经过HTTPS安全加密的请求(有人也经过测试发现，ie其实在头部加入Cache-Control：max-age信息，firefox在头部加入Cache-Control:Public之后，能够对HTTPS的资源进行缓存，参考《HTTPS的七个误解》);
4)POST请求无法被缓存;
5)HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存。
缓存使用流程
1)本地缓存阶段：先在本地查找该资源，如果有发现该资源，而且该资源还没有过期，就使用这一个资源，完全不会发送http请求到服务器;
2)协商缓存阶段：如果在本地缓存找到对应的资源，但是不知道该资源是否过期或者已经过期，则发一个http请求到服务器，然后服务器判断这个请求，如果请求的资源在服务器上没有改动过，则返回304，让浏览器使用本地找到的那个资源;
3)缓存失败阶段：当服务器发现请求的资源已经修改过，或者这是一个新的请求(在本来没有找到资源)，服务器则返回该资源的数据，并且返回200， 当然这个是指找到资源的情况下，如果服务器上没有这个资源，则返回404。
如果你想了解更多Web浏览器缓存的知识，或者想要快速掌握Web前端工程师所需技能，你可以选择专业学习一下，尽快入门Web前端行业，为自己搭建一个职场高起点！