http缓存

http 缓存分为强缓存,协商缓存

强缓存

强缓存表示直接使用缓存中的资源,不发请求,主要值有 Expires 和 Cache-Control

表现为请求状态码 200,size: (memory cache / disk cache)

memory cache:资源在内存中,读取时间几乎为 0,关闭页面时资源释放,下次打开如果再次命中强缓存就是 disk cache

disk cache:资源在磁盘中,毫秒级读取时间

协商缓存

如果未能从强缓存中读取资源,则发送请求到服务器,判断协商缓存(Last-Modified/If-Modified-Since ,ETag/If-None-Match)

协商缓存命中返回 304,不下载资源,使用缓存资源

协商缓存未命中返回 200,下载资源,更新缓存

下面通过实际场景讲解各种缓存方式

  1. 浏览器需要请求资源,每次从服务器获取资源,下载解析后使用

    缺点:每次请求浪费流量,时间

  2. 浏览器缓存资源,每次请求使用缓存资源

    缺点:资源更新后浏览器无法感知使用最新资源

  3. 约定过期时间 Exipres

    response header 中返回,值为 GMT 格式的标准时间(Fri, 23 Aug 2019 06:04:42 GMT),表示文件过期时间

    在过期时间内,直接使用缓存中资源

    缺点:客户端时间可以任意修改

  4. 约定相对过期时间 Cache-Contorl

    Cache-Contorl: max-age=10 (秒)

    过期后需要重新下载资源并重置过期时间

以上为强缓存,缺点为过期后需要重新下载资源,无论资源有没有更新
  1. 服务器告知文件上次修改时间 Last-Modified

    第一次请求文件时返回 Last-Modified(GMT 时间)
    强缓存失效时,request header 带上 If-Modified-Since(等于上一次请求的 Last-Modified)

    服务器比较文件修改时间和 If-Modified-Since,如果文件未修改则返回 304,浏览器不下载资源并直接使用缓存资源,如果修改过则返回 200,下载资源并更新 Last-Modified

    缺点:精确到秒

  2. 文件内容对比 Etag
    第一次请求文件时返回 Etag(GMT 时间)

    强缓存失效时,request header 带上 If-None-Match(等于上一次请求的 Etag)

    服务器比较文件 Etag 和 If-None-Match,如果文件未修改则返回 304,浏览器不下载资源并直接使用缓存资源,如果修改过则返回 200,下

    载资源并更新 Etag

tips

  1. 如果在 Cache-Control 响应头设置了 "max-age" 或者 "s-max-age" 指令,那么 Expires 头会被忽略
  2. Cache-Control: no-cache 表示不启用强缓存,Cache-Control: no-store 禁止使用缓存
  3. 如果同时使用 Etag 和 Last-Modified,那需要都满足条件
  4. Ctrl + F5 / Cammand + Shift + r 会忽略强缓存,使用协商缓存验证资源
  5. 一般情况设置 html 不缓存,以及时相应更新
  6. 实测 firefox 只使用协商缓存,忽略强缓存;chrome 中有强缓存优化,如果未明确禁止强缓存则会触发强缓存
  7. Pragma: no-cache,http1.0 标准,所有浏览器支持

    Cache-Control 不存在的时候,它的行为与 Cache-Control: no-cache 一致,表示需跟服务器验证缓存(使用协商缓存)
    基本废弃了,建议只在需要兼容 HTTP/1.0 客户端的场合下应用。

参考:

  1. 面试精选之 http 缓存
  2. [[前端词典]F5 同 Ctrl+F5 的区别你可了解](https://juejin.im/post/5c7d2d...

相关推荐