[笔记] 浏览器缓存

这篇文章的笔记：https://zhuanlan.zhihu.com/p/28113197

##浏览器缓存

1. 无需验证

针对缓存脚本始终不变，设置文件返回的http头中的cache-control为：

Cache-control: max-age=31536000

因为标准中规定max-age最大不能超过一年，所以设为最大值31536000（以秒为单位）；

如果脚本内容必须更改，就改变请求的文件名；

2. 需要验证

设置cache-control为一个较小的时间（比如2分钟）；

验证机制：

服务器第一次返回给浏览器的响应http头中，Etag字段表示这个请求的token，用于标识这个请求返回的唯一性；

资源过期之后浏览器再次请求时，添加一个If-None-Match的http头信息，就是过期资源的Etag值。服务器会比对Etag的版本信息来判断资源是否进行了更新；

如果验证之后发现资源发生了更改就返回完整的资源内容（状态码200）；否则返回304 Not Modified（状态码304）告知浏览器文件内容并未发生修改；

If-None-Match被称为Conditional Headers，这样的请求称为Conditional Request

---

###一些技术细节

• Cache-Control的其他值

  • no-cache

  仍然对资源使用缓存，但是每一次在使用缓存之前必须向服务器对缓存 资源进行验证。

  • no-store

  不使用任何缓存。

  • must-revalidate

  当缓存资源小于max-age时使用缓存，否则就需要对资源进行验证（所以must-revalidate和max-age组合使用最好）。

• Expires和max-age

Expires指定的是过期的具体时间（推荐向max-age过渡）；

• Etag和Last-Modified

Etag属于强验证（Strong Validation），期望的是资源字节级别的一致；

Last-Modified属于弱验证（Weak Validation），只要资源的主要内容一致即可；

约定：

1. 使用HTTP1.1标准的服务端应该同时发送Etag和Last-Modified字段；
2. 如果服务端提供了Etag，必须首先对Etag进行Conditional Request（If-None-Match头信息）；如果两个都提供了，那么就同时对两者进行Conditional Request（If-None-Match头信息）。如果服务端对两者的验证结果不一致，就不允许返回3049（后端也可修改）。

• max-age=0和no-cache

max-age=0：资源过期，需要重新验证；
no-cache：在每一次使用缓存之前必须强制对资源进行重新验证；

no-cache情况下浏览器不会在服务器验证成功之前使用过期的缓存资源，max-age=0不一定。

• public和private

需要将Cache-Control设为private，避免中间服务器缓存返回。

---

###其他tips

• 不要对变化的资源添加较短的max-age

对于样式或者脚本这种常变化的资源，不要用max-age。

• Service Worker

网络请求首先到达的是sw脚本中，如果未命中再转发给http缓存（这部分稍后记录）。

——> 类库sw-precache

---

###浏览器的整体缓存机制

一个请求在查找资源的过程中经过的缓存顺序是Memory Cache -> Service Worker -> HTTP Cache -> Push Cache。

• 内存缓存（Memory Cache）

包含当前文档中页面中已经抓取到的资源（页面上已经下载的样式，脚本、图片等）；

这些资源都暂存在内存中，当用户结束浏览网页并且关闭网页时，内存缓存的资源会被释放掉；

最重要的缓存资源是preloader相关指令（比如）下载的资源。如果资源已经存在于缓存中，则可能不会再进行preload。

内存缓存在缓存资源时并不关心返回资源的HTTP缓存头Cache-Control是什么值，同时资源的匹配也并非仅仅是对URL做匹配，还可能会对Content-Type，CORS等其他特征做校验。

• 推送缓存（Push Cache）

针对推送资源设定的，推送缓存的级别是session级别的，如果session结束则资源被释放；

存储时间较短，也并非严格执行http头中的缓存指令；

• 几乎所有的资源都能被推送，并且能够被缓存。Edge和Safari浏览器支持相对比较差；
• no-cache和no-store资源也能被推送；
• push cache是最后一道缓存机制；
• 如果连接被关闭则push cache被释放；
• 多个页面可以使用同一个HTTP/2的连接，也就可以使用同一个push cache，但是也依赖浏览器的实现而定（有的浏览器会被相同域名但不同的tab标签使用同一个http连接）；
• 一旦push cache中的资源被使用立即被删除；
• 如果push cache或者http cache已经存在被推送的资源，则有可能浏览器拒绝推送；
• 可以为其他域名推送资源。