浏览器的缓存机制

什么是浏览器缓存

浏览器缓存就是浏览器把一个已经请求过的Web资源拷贝一份副本储存在本地磁盘中。当再次访问相同的URL时，浏览器会根据缓存机制决定是直接使用副本响应访问请求，还是向服务器再次发送请求。

Cache-Control (与浏览器缓存机制有关的属性)

public

仅体现在响应头,通知浏览器可以无条件的缓存该响应客户端和代理服务器都可以缓存该资源；

private

仅体现在响应头，通知浏览器只针对单个用户缓存响应. 且可以具体指定某个字段.如private –“username”

no-cache

请求头:告诉浏览器回去服务器取数据,并验证你的缓存响应头:告诉浏览器,一定要回服务器校验,不管有没有缓存数据.如果没有确定没有被改,可以使用缓存中的数据

no-store

告诉浏览器任何情况下都不要被缓存

meta http-equiv

该属性相当于http头文件作用,可以向浏览器返回一些有用的信息,以帮助正确和精确的显示内容,http-equiv属性的值可以有content-type、expires、refresh等等。

HTTP缓存机制分类。

强制缓存

强制缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间，强制缓存中，普通刷新会忽略它，但不会清除它，需要强制刷新。浏览器强制刷新，请求会带上Cache-Control:no-cache和Pragma:no-cache。

协商缓存

协商缓存是由服务器确定缓存资源是否可用。主要涉及到Last-Modified/If-Modified-Since和Etag/If-None-Match两组header字段，并且都需要配合Cache-Control使用。

Last-Modified和ETag可以一起使用，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified。

浏览器缓存机制的好处

1.减少网络带宽消耗带宽如果消耗过多,那么我们的服务器配置就得升级,升级就意味着花钱, 使用的浏览器缓存之后,就可以减少网络流量,降低成本

2.降低服务器的压力使用浏览器缓存之后，除第一次访问需要向服务器请求网站全部资源，后续访问可以重复使用浏览器本地缓存，减少对服务器的请求，间接降低服务器的压力，同时，搜索引擎的爬虫也会根据缓存过期机制降低抓取的频率，也可以降低服务器压力。

3.减少网络延迟,加快网页加载速度浏览器缓存 web资源后，减少网络请求，可以更快速地获取到服务器返回数据，同时使用浏览器缓存内的文件比服务器获取快很多，所以网页加载速度明显快很多。

HTTP场景实践

访问https://www.baidu.com/PC站，对静态资源进行分析

状态代码是200？那它一定是经过完整的链路吗？

从状态代码: 200 (来自磁盘缓存)可以知道，该响应是从硬盘缓存中得到的

缓存策略是怎么样的？

cache-control -> 是强缓存相关协议头，则说明静态资源设置了强缓存相关的一个策略
max age -> 从秒换算后可以得知是一年的时间
access-control-allow-origin: * -> 允许所有域名访问
content-type -> text/css文件

HTTP缓存机制要点如下：

HTTP缓存机制分为强制缓存和协商缓存两类。
Expires的值是一个时间，表示这个时间前缓存都有效，都不需要发起请求。
Cache-Control有很多属性值，常用属性max-age设置了缓存有效的时间长度，单位为秒，这个时间没到，都不用发起请求。
immutable也是Cache-Control的一个属性，表示这个资源永远不用再请求了，但是他兼容性不好，
Cache-Control的max-age优先级比Expires高。

协商缓存常见技术有ETag和Last-Modified。

ETag其实就是给资源算一个hash值或者版本号，对应的常用request header为If-None-Match。
Last-Modified其实就是加上资源修改的时间，对应的常用request header为If-Modified-Since，精度为秒。

ETag每次修改都会改变，而Last-Modified的精度只到秒，所以ETag更准确，优先级更高，但是需要计算，所以服务端开销更大。

强制缓存和协商缓存都存在的情况下，先判断强制缓存是否生效，如果生效，不用发起请求，直接用缓存。如果强制缓存不生效再发起请求判断协商缓存。

HTTP的场景实践｜ 青训营