http缓存策略 转载

哪些资源可以被缓存？
静态资源（JS.CSS.img）
网站的HTML不能被缓存。
http缓存策略（强制缓存+协商缓存）

强缓存

从上图中可以看到，此时浏览器已经接收到 cache-control 的值，那么这个时候浏览器再次发送请求时，它会先检查它的 cache-control 是否过期，如果没有过期则直接从本地缓存中拉取资源，返回到客户端，而无需再经过服务器。强制缓存有过期时间，那么就意味着总有一天缓存会失效。那么假设某一天，客户端的 cache-control 失效了，那么它就没办法从本地缓存中拉取资源。于是它会重新向服务器发起请求，之后服务器会再次返回资源和 cache-control 的值。Cache-Control存在于响应头Response Headers中，可用于设置缓存的最大过期时间。
还有Expires与Cache-Control作用相同。Cache-Control的优先级大于Expires。

协商缓存

在上图中，表明了协商缓存的全过程。首先，如果客户端是第一次向服务器发出请求，则服务器返回资源和相对应的资源标识给浏览器。该资源标识就是对当前所返回资源的一种唯一标识，可以是ETag或者是Last-Modified.
之后如果浏览器再次发送请求时，浏览器就会带上这个资源标识。此时，服务端就会通过这个资源标识，可以判断出浏览器的资源跟服务端此时的资源是否一致，如果一致，则返回304，即表示Not Found 资源未修改。如果判断结果为不一致，则返回200，并返回资源以及新的资源标识。至此就结束了协商缓存的过程。
Response Headers中的两种资源标识：
Last-Modified资源的最后修改时间，对应请求头为 If-Modified-Since
ETag资源的唯一标识；对应请求头为If-None-Match(可以想象为人的指纹)
因为Last-Modified只能精确到秒级，所以优先级：ETag>If-Modified-Since

刷新操作方式，对缓存的影响。
1.输入URL
强制缓存效，协商缓存有效。
2.手动刷新F5
强制缓无效，协商缓存有效。
3.Ctrl+F5
强制缓无效，协商缓存无效。

先查看是否命中强缓存，未命中，则进行协商缓存。

图片来源：星期一工作室
链接：https://juejin.cn/post/6974529351270268958
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。