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 (秒)

   过时后须要从新下载资源并重置过时时间

以上为强缓存，缺点为过时后须要从新下载资源，不管资源有没有更新

5. 服务器告知文件上次修改时间 Last-Modified

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

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

   缺点：精确到秒

6. 文件内容对比 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 的区别你可了解