浏览器缓存-简单介绍

两个概念

    • 强缓存
      用户发送的请求,直接从客户端缓存中获取,不发送请求到服务器,不与服务器发生交互行为。

    • 协商缓存
      用户发送的请求,发送到服务器后,由服务器返回hash值(Etag)、文件最后修改时间(Last-modified)与客户端的If-None-Match、If-Modified-Since进行对比从而判断是否从缓存中获取资源。

    • 两者共同点:客户端获得的数据最后都是从客户端缓存中获得。

    • 两者的区别:从名字就可以看出,强缓存不与服务器交互,而协商缓存则需要与服务器交互

强缓存:

    • expires
      Http1.0 中的标准,表明过期时间,注意此处的时间都是指的是服务器的时间。

    • Cache-Control 简单介绍下Cache-Control的属性设置:

      public:响应会被缓存,并且在多用户间共享。默认是public。

      private: 响应只作为私有的缓存,不能在用户间共享。如果要求HTTP认证,响应会自动设置为private。

        max-age: 响应头设置max-age(缓存的最大的有效时间,单位为秒(s))。max-age会覆盖掉Expires

           请求头设置缓存max-age=0的时候,该请求不会直接读取已有的缓存,而是与浏览器协商后决定是都读取缓存(协商缓存)

      no-cache: 响应头设置了no-cache之后并不代表浏览器不使用缓存,而是本次响应资源不进行缓存。

             请求头设置了no-cache是本次请求不读取缓存直接拉取最新的资源。

      no-store: 绝对禁止缓存、删除已有的缓存资源。

协商缓存:

    • Last-modified: 表明请求的资源上次的修改时间。(Last-modified与If-Modified-Since相同则使用缓存)(Last-modified与If-Modified-Since相同证明文件没有被修改)
    • If-Modified-Since:客户端保留的资源上次的修改时间。
    • Etag:资源的内容标识。(不唯一,通常为文件的md5或者一段hash值,If-None-Match与Etag相同则使用缓存)(If-None-Match与Etag相同证明文件没有被修改)
    • If-None-Match: 客户端保留的资源内容标识。

与缓存的用户行为

F5(不直接读缓存,与服务器协商后再决定是否读取缓存):

  谷歌浏览器:只有当前请求无视Cache-Control(请求header额外添加了Cache-Control:max-age=0),其他请求不受影响(注意谷歌浏览器缓存的方式有两种:硬盘缓存(dist cache)、内存缓存(menory cache),其他浏览器均为硬盘缓存)

  火狐浏览器:所有请求(包括加载的js、css文件等)无视Cache-Control(请求header额外添加了Cache-Control:max-age=0)

CRTL+F5(不读缓存,直接获取新的资源,所有浏览器都一样,请求header额外添加Cache-Control:no-cache)

项目中常用的缓存方式:

1. 如果有用到webpack等打包工具的,建议使用强缓存(Cache-control方式,设置max-age时间可以长一些)+webpack打包使用hash文件名实现浏览器缓存与缓存更新。(这是目前最优的解决方案)

2. 如果项目中没有用到webpack等打包工具的,建议使用协商缓存来解决缓存问题(协商缓存较消耗性能,且google浏览器会出现无法获取最新的Etag、Last-modified等情况。火狐浏览器正常。)。

posted @ 2018-11-20 00:24  Ricky_boke  阅读(161)  评论(0编辑  收藏