缓存

[conan1992]

强缓存

浏览器中的缓存作用分为两种情况，一种是需要发送HTTP请求，一种是不需要发送。

发送http请求前，通过Expires（HTTP/1.0）、Cache-Control(HTTP/1.1)来检查抢缓存；当Expires和Cache-Control同时存在的时候，Cache-Control会优先考虑

• Expires
  Expires即过期时间，存在于服务端返回的响应头中，告诉浏览器在这个过期时间之前可以直接从缓存里面获取数据，无需再次请求

Expires: Wed, 22 Nov 2019 08:41:00 GMT
//表示资源在2019年11月22号8点41分过期，过期了就得向服务端发请求。

问题：服务器的时间和浏览器的时间可能并不一致，那服务器返回的这个过期时间可能就是不准确的。所以后面HTTP/1.1推出了Cache-Control；

• Cache-Control
  • max-age=3600
  • public: 客户端和代理服务器都可以缓存。
  • private： 这种情况就是只有浏览器能缓存了，中间的代理服务器不能缓存。
  • no-cache: 跳过当前的强缓存，发送HTTP请求，即直接进入协商缓存阶段。
  • no-store：非常粗暴，不进行任何形式的缓存。
  • s-maxage：这和max-age长得比较像，但是区别在于s-maxage是针对代理服务器的缓存时间。
  • must-revalidate: 是缓存就会有过期的时候，加上这个字段一旦缓存过期，就必须回到源服务器验证。

Cache-Control:max-age=3600
//代表这个响应返回后在 3600 秒，也就是一个小时之内可以直接使用缓存。

当资源缓存时间超时了，也就是强缓存失效了就进入——协商缓存了

协商缓存

强缓存失效之后，浏览器在请求头中携带相应的缓存tag来向服务器发请求，由服务器根据这个tag，来决定是否使用缓存，这就是协商缓存。

• Last-Modified
  即最后修改时间。在浏览器第一次给服务器发送请求后，服务器会在响应头中加上这个字段。
• ETag
  ETag 是服务器根据当前文件的内容，给文件生成的唯一标识，只要里面的内容有改动，这个值就会变。服务器通过响应头把这个值给浏览器。

缓存位置

• Service Worker
• Memory Cache
• Disk Cache
• Push Cache

总结

对浏览器的缓存机制来做个简要的总结:

首先通过 Cache-Control 验证强缓存是否可用

• 如果强缓存可用，直接使用
• 否则进入协商缓存，即发送 HTTP 请求，服务器通过请求头中的If-Modified-Since或者If-None-Match这些条件请求字段检查资源是否更新
  • 若资源更新，返回资源和200状态码
  • 否则，返回304，告诉浏览器直接从缓存获取资源

参考

• 能不能说一说前端缓存