HTTP缓存初识

• 一、HTTP缓存
  • 1、强制缓存
  • 2、协商缓存
    • 静态资源
    • 动态资源
• 二、总结

参考：

http://muchstudy.com/2016/08/18/HTTP%E7%BC%93%E5%AD%98%E8%AF%A6%E8%A7%A3/

https://aotu.io/notes/2016/09/22/http-caching/

http://www.cnblogs.com/chenqf/p/6386163.html

一、HTTP缓存

• 强制缓存
• 协商缓存（对比缓存）

1、强制缓存

名称	说明
Expires	响应失效的日期和时间。类似于：Expires:Sat, 20 Aug 2016 01:40:57 GMT，绝对值，告诉客户端在这个时间点之后资源过期，需要重新从服务器取。
Cache-Control	类似于：Cache-Control:max-age=315360000，相对值，在多久后过期

通过上面两种方式，当资源的缓存还在有效期时，浏览器直接从本地缓存中取资源，而不是发起HTTP请求从源服务器取。由于客户端与服务器端存在时间差，Expires并不是那么的靠谱，所以建议使用max-age。

2、协商缓存

名称	说明
If-Modified-Since \ Last-Modified	告诉服务器只要服务器在这个时间之后又对资源做了修改则发送该资源
If-None-Match 与 ETag	根据资源内容是否变更来判断是否继续使用本地缓存。第一次请求资源时，服务器在response头信息中设置ETag，当资源过期后再次向服务器请求时用If-None-Match:ETag去验证资源是否变更

静态资源

• JS

• CSS

• 图片

• 二进制文件

  在文件或者路径中嵌入指纹，避免使用查询字符串。确保生成的URL长度超过8个不通的字符。

  使用这些HTTP响应头：

  1. Cache-Control: public, max- age=31536000
  2. Expires: (一年后的今天)
  3. ETag: (基于内容生成)
  4. Last-Modified: (过去某个时间)
  5. Vary: Accept-Encoding

动态资源

使用如下响应头：

1. Cache-Control: public, max-age=0
2. Expires: (当前时间)
3. ETag: (基于内容生成)
4. Last-Modified: (过去某个时间)
5. Vary: Accept-Encoding

二、总结

• 对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。

• 对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

浏览器第一次请求：

浏览器再次请求时：