前端-浏览器的缓存详解

前端-浏览器的缓存详解 目录

---

前言

• 面试常见细节，建议读完后并记住。

浏览器的缓存

• http属于七层里的应用层
• 200,301, 304的区别
  • 200:状态码 200 OK 表明请求已经成功. 默认情况下状态码为200的响应可以被缓存。
  • PUT 和 DELETE 的请求成功通常并不是响应200 OK的状态码，而是以下：
    • 201:Created表示一个资源首次被创建成功
    • 204:No Content 表示无内容
  • 301:网站重构，URL 重定向，也称为 URL 转发，是一种当实际资源，如单个页面、表单或者整个 Web 应用被迁移到新的 URL 下的时候，保持（原有）链接可用的技术。HTTP 协议提供了一种特殊形式的响应—— HTTP 重定向（HTTP redirects）来执行此类操作
    • 重定向分为：永久、临时和特殊
      • 308：方法和消息主体都不发生变化。网站重构，用于非GET方法。(with non-GET links/operations)
  • 304：特殊重定向，发送用于重新验证的条件请求。表示缓存的响应仍然是新鲜的并且可以使用。
• 常见的http缓存

Cache-control字段的内容

• public：HTTP 返回的时候在Heaher 中设置Cache-Control 的值为‘public’。它代表，这个HTTP 请求它返回的内容所经过的任何路径中，包括中间的一些HTTP 代理服务器以及发出请求的客户端浏览器，都可以进行对返回内容的缓存操作
• private：发起请求的浏览器才能使用返回数据的缓存
• no-cache：可以在本地或者proxy服务器进行缓存，每次发起请求都要去服务器验证，服务器返回可以使用缓存，才可以真正使用本地缓存，任何节点都不能直接使用缓存

到期(缓存的有效期)

• max-age=<seconds>
• s-maxage=<seconds>：只有在代理服务器才会生效，且代理服务器会优先使用s-maxage
• max-stale=<seconds>：它是发起请求方，主动去带着的header；在max-age过期后，但还在max-stale的有效期内，还可以使用过期的缓存，不需要去原服务器请求新的内容

重新验证

• must-revalidate：当我们设置了 max-age ，过期后，我们必须去原服务端发送请求，重新获取数据，验证是否缓存过期，而不能直接去使用本地的缓存
• proxy-revalidate：与must-revalidate 相似，proxy-revalidate 是用在缓存服务器中，如果缓存服务器中的数据过期的话，需要去原服务器发送请求

其他

• no-store：浏览器或者proxy服务器都不能存返回数据的缓存，永远都需要去服务器请求新的数据
• no-transform：主要用在proxy服务器，表示不要去随意改动返回的内容，比如压缩什么的

Last-modified字段的内容

• 服务端在返回资源时，会将该资源的最后更改时间通过Last-Modified字段返回给客户端。
• 客户端下次请求时通过If-Modified-Since或者If-Unmodified-Since带上Last-Modified，服务端检查该时间是否与服务器的最后修改时间一致：
  • 如果一致，则返回304状态码，不返回资源；
  • 如果不一致则返回200和修改后的资源，并带上新的时间。

If-Modified-Since和If-Unmodified-Since的区别是：
If-Modified-Since：告诉服务器如果时间一致，返回状态码304
If-Unmodified-Since：告诉服务器如果时间不一致，返回状态码412

Etag

单纯的以修改时间来判断还是有缺陷，比如文件的最后修改时间变了，但内容没变。对于这样的情况，我们可以使用etag来处理。

etag的方式是这样：

服务器通过某个算法对资源进行计算，取得一串值(类似于文件的md5值)，之后将该值通过etag返回给客户端，客户端下次请求时通过If-None-Match或If-Match带上该值，服务器对该值进行对比校验：如果一致则不要返回资源。
If-None-Match和If-Match的区别是：
If-None-Match：告诉服务器如果一致，返回状态码304，不一致则返回资源
If-Match：告诉服务器如果不一致，返回状态码412