RoleTang's Blog

浏览器缓存

9/10/2022

# 浏览器缓存

​ 浏览器发送请求时会先查看响应头中强缓存是否命中。若未命中，则发送携带协商缓存的请求头字段至服务器端进行判断是否命中。

  1. 强缓存

    1. Expires(HTTP/1.0，响应头部字段) ==> 具体的时间/0为过期

      Expires: Wed, 21 Oct 2015 07:28:00 GMT

      即过期时间，相对于服务器而言，在过期之间可以直接从缓存中获取数据。

      但可能存在服务器时间与浏览器时间不一致的情况，比如时区不一致导致的。

    2. Cache-Control(HTTP1.1，通用头部字段) ==> max-age=<seconds>

      采用过期时长（相对时间），对应max-age，从浏览器返回到时长内都采用缓存。

      Pragma：同cache-control的no-cache。是HTTP首部字段，目前已经弃用。

      其他字段：

      • public: 客户端和代理服务器都可以缓存。
      • private: 这种情况就是只有浏览器能缓存了，中间的代理服务器不能缓存。
      • no-cache: 跳过当前的强缓存，发送HTTP请求，即直接进入协商缓存阶段。
      • no-store：非常粗暴，不进行任何形式的缓存。如果是进行托管缓存的话**可以（不是必须）**进行此设置。
      • s-maxage：这和max-age长得比较像，但是区别在于s-maxage是针对代理服务器的缓存时间。

    同时存在时候优先考虑Cache-Control。当缓存资源失效后，进入协商缓存。

  2. 协商缓存

    1. Last-Modified

      Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT

      即为最后修改时间。浏览器发送请求后，服务器添加这个字段，如果再次请求，浏览器发送请求会携带If-Modified-Since字段，然后服务器收到会和自身的该资源的最后的修改时间对比

      • 如果请求头中的时间小于最后修改的时间，则进行更新。跟常规返回流程一样。
      • 否则304，让浏览器使用缓存。

    2. ETag

      ETag是服务器根据比如MD5的算法，生成对应文件的唯一的标识，文件改变后这个值便会被修改。

      下一次浏览器发送请求时候会将ETag的值作为If-None-Match字段的值。

      • 一样，返回304，使用缓存
      • 否则常规HTTP流程

    3. 两者对比

      • 性能上，a更优，因为只需要记录时间节点。
      • 精度上，b更优，能感知资源的变化
      • 同时支持的情况下，优先考虑ETag

  3. 缓存位置

    1. Service Worker

      Https传输协议下的使用的，是运行在浏览器背后的独立线程。无法访问dom，但能做离线缓存、消息代理等功能。这里的离线缓存便是service worker cache

    2. Memory Cache

      内存，主要是当前页面中已经抓取到的资源，比如已经下载的样式脚本等，缓存随着tab关闭而随之被释放

    3. Disk Cache

      根据Header字段判断缓存。

      对于 2、3 而言，一般是较大的文件会被丢入磁盘；同时

    4. Push Cache

      HTTP/2.0的内容，前三个都未中时才使用

  4. 浏览器本地存储

    1. Cookie

      弥补HTTP在状态管理下的不足

      以键值对的形式存储，针对同一个域名发送请求会携带相同的cookie

      • 容量缺陷，只有4kb
      • 性能缺陷，浏览器每一次发送请求都会携带，而不管是否需要
      • 安全缺陷，以纯文本的方式传递，容易被截获

      cookie（set-cookie）的属性说明，通常是以 name=value 的键值对形式进行存储。

      属性 说明
      domain 指定 cookie 所属域名，默认是当前域名
      sameSite 允许服务器要求某个 cookie 在跨站请求时不会被发送，防CSRF攻击。lax：Cookies允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送（默认）。strict：完全禁止第三方cookie。none：默认都会携带。若设置为none需要配合secure属性。
      path 指定 cookie 在哪个路径（路由）下生效，默认是 '/'。 如果设置为 /abc，则只有 /abc 下的路由可以访问到该 cookie，如：/abc/read。
      maxAge cookie 失效的时间，单位秒。如果为整数，则该 cookie 在 maxAge 秒后失效。如果为0或者负数，表示删除该 cookie 。 - 比 expires 可靠。
      expires 过期时间，在设置的某个时间点后该 cookie 就会失效。 一般浏览器的 cookie 都是默认储存的，当关闭浏览器结束这个会话的时候，这个 cookie 也就会被删除
      secure 该 cookie 是否仅被使用安全协议传输。安全协议有 HTTPS 等，在网络上传输数据之前先将数据加密。默认为false。 当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效。
      httpOnly 如果给某个 cookie 设置了 httpOnly 属性，则无法通过 JS 脚本 读取到该 cookie 的信息，但还是能通过 Application 中手动修改 cookie，所以只是在一定程度上可以防止 XSS 攻击，不是绝对的安全

    如果没有指定expires和maxage，则是临时会话cookie，浏览器关闭失效。

  5. localStorage

    本地存储。针对一个域名，即在同一个域名下，会存储相同的一段localStorage，通常是以键值对的形式进行存储的。getItem、setItem、removeItem、clear

    • 一个域名的存储容量为5M，是持久存储的
    • 只存在于客户端，避免了性能和安全问题
    • 接口封装，操作方便

  6. sessionStorage

    会话存储。同localStorage，但是是会话级别的，网页关闭，sessionStorage便也不存在了

  7. indexedDB

    非关系型的数据库，容量更大。

    • 支持事务，能够存储二进制数据
    • 键值对存储
    • 异步操作