HTTP缓存机制

两种缓存位置

使用哪种缓存位置由浏览器自行决定，不受代码控制

• from memory cache
  从内存中获取，页面关闭后即被释放
• from disk cache
  从磁盘中获取，多次重复加载的资源会从memory转移到disk

控制台Network中的Size

• from memory cache
• from disk cache
• 数值且状态码为200
  从服务器获取的资源，该数值即为资源大小
• 数值且状态码为304
  该数值是通信报文的大小，并不是该资源本身的大小，该资源是从本地获取的。

两种缓存方式

强缓存

缓存数据未失效时直接使用浏览器的缓存数据而不向服务器请求，状态码总为200，期间服务器资源发生变化也不会令前端获知

• Pragma
  Http1.0的缓存机制,在Http1.1中已废弃

  
  

• Expires
  在服务器端配置,为一个缓存截至时间点。
  缺陷:客户端时间和服务端时间可能有误差

• Cache-Control
  在服务器端配置,通常使用max-age=XXXXXX指定资源能被缓存的时长

  • no-store: 强缓存和协商缓存都禁用
  • no-cache: 禁用强缓存，但协商缓存可以生效
  • private(默认): 可以被浏览器缓存, 通常和max-age组合使用
  • public: 可以被浏览器、服务器、代理服务器等缓存，通常和max-age组合使用
  • max-age: 相对过期时间(秒)

两者同时存在时Cache-Control生效，考虑到浏览器兼容性，保险起见两者可以一起使用

协商缓存

• 触发条件
  当第一次请求时服务器返回的响应头中Cache-Control和Expires不存在或已过期或为no-cache时(即不走强缓存)，那么浏览器第二次请求时就会与服务器端对比判断资源是否进行了修改更新。
• 对比方式
  当服务器第一次向浏览器返回资源时，会在响应头中带上ETag(唯一hash值,会在文件变化时变化)和Last-Modified(最后修改时间)。
  浏览器下一次请求时会在请求头中带上与ETag对应的If-None-Match(就是上一次接收到的ETag)，以及Last-Modified对应的If-Modified-Since(就是上一次接收到的Last-Modified)。服务器在接收到这两个参数后会做比较并返回结果。
• 返回结果
  未更新则为304状态码，使用缓存。
  已更新则为200状态码，服务器就会返回更新后的资源并且将新的缓存信息一起返回。

两者同时存在则根据Etag / If-None-Match判断
在服务器集群情况下不建议使用ETag, 因每个服务器将返回不同的ID

总结

1. 若强制缓存生效则直接使用缓存(200)，否则进行协商缓存判断
2. 若协商缓存生效则继续使用缓存(304)，否则重新获取请求结果(200)

Tips

• 127.0.0.1或localhost访问时浏览器缓存策略会出现反常情况，因此测试时不建议直接访问本机
• 前端页面中可以通过控制缓存，但支持度较差，不建议使用

Nginx配置强缓存

    location /demo {  
        expires 30d; #平时30天强缓存
        autoindex on; 
         # 对html文件禁用缓存
        if ($request_filename ~ .*\.(htm|html)$)
            {
                expires -1;
                add_header Cache-Control no-cache;
            }
        alias /data/html/demo;
     }
    
    # 媒体资源永久缓存
    location ~ \.(wma|wmv|asf|mp3|mmf|zip|rar|swf|flv)$ {
              root /var/www/upload/;
              expires max;
      }