浏览器缓存

1.http中header各字段作用及区别:

  • 作用:
    • Expires: 告诉浏览器在过期时间前可以使用缓存副本;
    • Cache-Control: 参数(no-cache, no-store, max-age, public, private);
    • Last-Modified:告诉浏览器资源最后修改时间;
    • ETag: 告诉浏览器当前资源在服务器的唯一标识符(规则服务器决定)
  • 区别:
    • ExpiresCache-Controle:Cache-ControlExpires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多,设置更细致;

    • ETagLast-Modified:
      你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新,为什么还需要Etag(实体标识)呢?HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题:
      a 、Last-Modified标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的新鲜度.
      b 、如果某些文件会被定期生成,当有时内容并没有任何变化,但Last-Modified却改变了,导致文件没法使用缓存.
      c 、有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形.
      Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符,能够更加准确的控制缓存。Last-ModifiedETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304。

    • Expires/Cache-Controle 与 ETag/Last-Modified:
      配置Last-Modified/ETag的情况下,浏览器再次访问统一URI的资源,还是会发送请求到服务器询问文件是否已经修改,如果没有,服务器会只发送一个304回给浏览器,告诉浏览器直接从自己本地的缓存取数据;如果修改过那就整个数据重新发给浏览器;
      Cache-Control/Expires则不同,如果检测到本地的缓存还是有效的时间范围内,浏览器直接使用本地副本,不会发送任何请求。即当本地副本根据Cache-Control/Expires发现还在有效期内时,则不会再次发送请求去服务器询问修改时间(Last-Modified)或实体标识(Etag)了。

2. Header 字段优先级:

Cache-Control > Expires > ETag > Last-Modified

3. 使用时需注意:

一般情况下,使用Cache-Control/Expires会配合Last-Modified/ETag一起使用,因为即使服务器设置缓存时间, 当用户点击“刷新”按钮时,浏览器会忽略缓存继续向服务器发送请求,这时Last-Modified/ETag将能够很好利用304,从而减少响应开销。

4. 用户操作对浏览器缓存影响:

当用户在按F5进行刷新的时候,会忽略Expires/Cache-Control的设置,会再次发送请求去服务器请求,而Last-Modified/Etag还是有效的,服务器会根据情况判断返回304还是200;而当用户使用ctrl+F5进行强制刷新的时候,只是所有的缓存机制都将失效,重新从服务器拉去资源。

5. 无法被浏览器缓存的请求:

  • HTTP信息头中包含Cache-Control:no-cache,pragma:no-cache,或Cache-Control:max-age=0等告诉浏览器不用缓存的请求.
  • 需要根据Cookie,认证信息等决定输入内容的动态请求是不能被缓存的.
  • 经过HTTPS安全加密的请求.
  • POST请求无法被缓存.
  • HTTP响应头中不包含Last-Modified/Etag,也不包含Cache-Control/Expires的请求无法被缓存.

参考

  1. http://www.alloyteam.com/2012/03/web-cache-1-web-cache-overview/