对于客户端缓存（即浏览器缓存），因为浏览器会自动管理缓存，所以平时编程时基本没怎么考虑，但还是要了解一下。
浏览器是否使用缓存、缓存多久，是由服务器来控制的。当浏览器请求一个网页时，服务器发回的响应头部分的某些字段指明了有关缓存的关键信息。
服务器在返回响应式，还会发出一组HTTP头，用来描述内容类型、长度、缓存指令、验证令牌等。
cache1.png
例如，上图中服务器返回了一个1024字节的响应，指导客户端缓存响应长120秒，并提供验证令牌(x234dff),在响应期过后，可以用来验证资源是否被修改。
使用缓存的两点好处：
- 减少页面加载时间
- 减少服务器负载
HTTP协议中关于缓存信息头的关键字
-
Cache-Control 缓存头控制
在HTTP/1.1 规范中定义，该指令控制谁在什么条件下可以缓存响应，以及可以缓存多久。
| Cache-directive | 说明 |
|---|---|
| public | |
| private | 只为单个用户缓存，不允许任何中继缓存对其进行缓存。例如用户浏览器可以缓存包含私人信息的HTML，但是CDN不能缓存。 |
| no-cache | 必须先与服务器确认返回的响应是否被更改。如果存在合适的验证令牌(ETag)，no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。 |
| no-store | 直接禁止浏览器和所有中继缓存存储返回的任何版本的响应（例如银行数据，每次用户请求时，都会向服务器发送请求，并下载完整响应） |
| max-age=xxx | 从当前请求开始，允许获取的响应被重用的最长时间（单位：秒）eg.max-age=60 表示响应可以再缓存和重用60秒。 |
how to make a desicion? here comes 最优缓存策略
最优缓存策略.png
理想情况下，目标应该是在客户端上缓存尽可能多的响应，缓存尽可能长的时间，并且为每个响应提供验证令牌，以便进行高效的重新验证。
有的网站可以缓存90%以上的资源，有些网站有许多私密的或者时间要求苛刻的数据，根据无法缓存。
我们要做的是审查我们的网页，确定哪些资源可以被缓存，并确保可以返回正确 Cache-Control和ETag头
- Expires
通过指明缓存的具体过期时间来控制缓存。在过期时间以内再次发起请求，浏览器会直接使用本能副本。和Cache-Control同时出现时，Cache-Control会覆盖前者的设定能。
- Last-Motified 和ETag
服务器可在HTTP返回头中包含这两个字段。Last-Modify指被请求资源在服务器端的上次修改时间。ETag是一个唯一文件表示符，每次文件修改后都会生成一个新的ETag.
即使是在过期时间以内，为了保证所加载的资源是最新的，大部分浏览器不会再直接使用缓存中的数据，而是发出一个条件请求(Conditional GET Request),对于这类请求，浏览器会在请求头中包含<font color=gray>If-Modify-since</font>或If -None-Match字段，前者即浏览器当初得到的Last-Modified，后者即浏览器当初得到的ETag.当服务器发现资源的更新时间晚于 If-Modified-Since 所提供的时间，或者资源在服务器端当前的 ETag 和 If-None-Match 提供的不符时，会响应整个资源，否则只会响应一个 304 Not Modified 状态码（因此浏览器将不需要重新下载整个资源）。这种机制可以最大程度上减少数据下载量。
废弃和更新已缓存的响应
Q: 文件仍在缓存期内，而设计人员提交更新，用户如何使用到新文件？
A:在不更改资源网址的情况下，我们做不到。一旦浏览器缓存响应，在过期以前，将一直使用缓存版本，除非因为某种原因从缓存中删除，例如用户清除了浏览器缓存。
解决：在资源内容更改时，我们可以更改资源的网址，强制用户下载新响应。一般，可以在文件名中嵌入文件的指纹码（或版本号）来实现。例如：style.x234dff.css.
缓存层级更新策略.png
HTML为no-cache,意味着浏览器每次请求都会重新验证文档。
组合使用ETag、Cache-Control 和唯一网址，我们能提供的最佳方案是：较长的过期时间，控制可以缓存响应的位置，以及按需更新。
定义缓存策略的技巧和方法
- 确保服务器提供验证令牌(ETag)： 如果服务器上的资源未被更改，就不必传输相同的字节。
- 确定中继缓存可以缓存的资源：对所有用户的响应完全相同的资源很适合由 CDN或其他中继缓存进行缓存。
- 确定网站的最佳缓存层级：（上图所示）HTML文档（no-cache）+资源网址（内容指纹码命名）= 控制客户端获取更新的速度
- 搅动最小化：分类经常更新和比较固定的资源。
参考文章：
https://developers.google.cn/web/fundamentals/security/?hl=zh-cn
https://www.renfei.org/blog/http-caching.html
网友评论