强缓存和协商缓存

什么是浏览器缓存

浏览器缓存（Browser Caching）是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者访问同一页面时，浏览器就可以直接从本地磁盘加载文档

浏览器缓存的优点

• 减少了冗余的数据传输，节省了网费
• 减少了服务器的负担，大大提升了网站的性能
• 加快了客户端加载网页的速度

浏览器缓存的大概流程

• 浏览器第一次请求时，服务器返回 200，浏览器将资源文件下载下来
• 浏览器再次发送请求时
  • 浏览器会判断是否命中强缓存
    • 如果命中，则直接从缓存中获取资源，本次请求不会与服务器通信
    • 如果没有命中，浏览器会把请求发送到服务器
  • 服务器会根据请求判断是否命中协商缓存
    • 如果命中，则服务器返回 304 Not Modified，浏览器从缓存中加载资源
    • 如果没有命中，则返回最新内容，状态码为 200

强缓存

强缓存是利用 http response header 中的 Expire 或者 Cache-Control控制

Expires

• 该字段是 http1.0 的规范
• 它是一个绝对时间的 GMT 格式的字符串，比如Expires: Mon,18 Oct 2066 23:59:59
• 这个时间代表资源的失效时间，如果发送的时间在此时间之前，则命中强缓存
• 缺点：由于失效时间是一个绝对时间，所以服务器和客户端时间偏差比较大的时候，就会导致缓存混乱

Cache-Control

• 该字段是 http1.1 中的规范
• 主要是利用max-age值进行判断
• 这是一个相对的时间，比如 Cache-Control: max-age = 3600代表资源有效期是 3600 秒
• 通过计算资源第一次请求的时间和Cache-Control设定的有效期，计算资源过期的时间
• 然后拿这个时间和请求时间比较，如果在请求时间之前，则命中强缓存
• 几个常用的设置值
  • no-cache：不走强缓存，有可能会命中协商缓存
  • no-store：禁止浏览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源，协商缓存也不会命中了
  • public：可以被所有用户缓存，包括终端用户，和 CDN 等中间代理服务器
  • private：只能被终端用户的浏览器缓存，不允许 CDN 等中继服务器对其缓存

注意：Cache-Control 和 Expires 可以在服务器端配置同时启用，同时启用的时候 Cache-control 的优先级高

协商缓存

协商缓存就是由服务器来确定缓存是否可用，所以客户端和服务器端要通过某种标识来进行通信，从而让服务器判断请求的资源是否可以缓存访问

主要涉及两组 header 字段，这两组字段都是成对出现的

第一次请求的 response header 带上某个字段（Last-Modified或者Etag），后续请求则会带上对应的请求字段（If-Modified-Since或者If-None-Match），如果 response header 没有Last-Modified或者Etag，则 request header 也不会有对应的字段

Last-Modified/If-Modified-Since

• 浏览器第一次请求一个资源的时候，response header 中会加上 Last-Modified，该字段表示资源最后修改的时间，例如Last-Modified: Thu,31 Dec 2037 23:59:59 GMT
• 浏览器在再次请求资源时，request header 中会包含If-Modified-Since，该值为缓存之前返回的Last-Modified
• 服务器收到If-Modified-Since后，根据资源在服务器上最后修改的时间判断是否命中协商缓存
• 如果命中，直接返回 304 Not Modified，不会返回资源内容，也不会更新 response deader
• 如果没有命中，正常返回资源内容，response header 中的 Last-Modified会更新
• 浏览器下次请求时，If-Modified-Since会启用上次返回的Last-Modified的值

Etag/If-None-Match
该字段是 http1.1 中的规范

和Last-Modified/If-Modified-Since不同的是

• Etag/If-None-Match返回的是一个校验码
• 当服务器返回 304 Not Modified 的响应时，由于 ETag 重新生成过，response header 中还会把这个 ETag 返回，即使这个 ETag 跟之前的没有变化

为什么要有 Etag
HTTP1.1中 Etag 的出现主要是为了解决几个Last-Modified比较难解决的问题：

• 一些文件也许会周期性的更改，但是它的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET
• 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since 能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)
• 某些服务器不能精确的得到文件的最后修改时间

注意：Last-Modified 与 ETag 是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对 Last-Modified，最后才决定是否返回304

强缓存和协商缓存的区别

参考
https://www.jianshu.com/p/1a1536ab01f1
http://caibaojian.com/browser-cache.html
https://www.cnblogs.com/wonyun/p/5524617.html