【明年找到好工作】：面试题打卡第三天

# http缓存

http缓存都是从第二次请求开始的

流程：

1、第一次请求资源时，服务器返回资源，并在响应头部中注入回传资源的缓存参数

如：

Cache-Control: max-age=31536000单位是s（http1.1）

expires （http1.0）

优先级：Cache-Control > expires

选项	解释
max-age=100	缓存100秒后过期，资源缓存在本地
no-cache	不使用本地缓存。使用协商缓存，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务器验证，如果资源未被更改，那可以避免重新下载
no-store	所有内容都不会被缓存，既不使用强制缓存也不使用协商缓存，每次用户请求该资源，都会向服务器发送请求，服务器再返回资源
public	可以被所有的用户缓存，包括客户端和代理服务器
private	只能被客户端缓存，不允许CDN等中继续存服务器对其缓存
s-maxage	覆盖max-age，作用与max-age一样，但只用于代理服务器中缓存

第一次请求：

2、第二次请求时（相同资源），浏览器会先查看该资源的缓存参数，通过判断 max-age=315360000是否过期，未过期则命中强缓存，不会向后端发送请求。否则就把请求参数注入到请求头部传给服务器

第二次请求：

补充知识点：

• from memory cache 代表使用内存中的缓存
• from disk cache 代表使用硬盘中的缓存

浏览器加载顺序为 memory -> disk

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中；而css文件存放在硬盘中的缓存中

强缓存的这种方式页面加载速度是最快的，性能也是最好的，但是在这期间必须保证线上资源没有被修改

3、到达服务器，看是否命中协商缓存，命中则返回304，否则服务器会返回新的资源

常见的http缓存只能缓存get请求响应的资源

---

# 协商缓存（对比缓存）

协商缓存是一种服务端缓存策略

流程：

1、如果服务器使用协商缓存，第一次发送请求从服务端获取到资源后，会将资源在本地进行缓存。并且服务端还会返回资源标识符。

2、再次发送请求时（会携带资源标识符）。此时服务器通过标识符判断浏览器中的资源版本是否与服务器中最新的资源版本是否一致。

3、若一致，服务器就会返回给浏览器304的状态码，重定向让浏览器直接从本地缓存中去取资源

4、若不一致，服务器就会返回给浏览器200的状态码，并且返回最新的资源和新的资源标识符

补充：

资源标识符：

• Last-Modified/If-Modified-Since：指资源上一次修改的时间（精确到秒）

• Etag/If-None-Match：资源对应的唯一字符串（只要文件内容不同，对应的Etag就一定会发生变化）

为什么需要使用Etag来判断文件是否修改

如果在浏览器本地缓存中缓存了文件，若后台打开了该文件，并进行编辑，但最终保存内容没有发生变化，但此时Last-Modified/If-Modified-Since已经更新修改时间。

再次请求该资源时，通过判断 Last-Modified/If-Modified-Since就会出现下载相同文件，浪费带宽。

因此Etag/If-None-Match就应运而生，服务器会先验证ETag，一致的情况下，才会判断Last-Modified/If-Modified-Since，最后才决定是否返回 304

---

# 强缓存和协商缓存的对比

	强缓存	协商缓存
缓存存放位置	本地浏览器	本地浏览器
http状态码	200	304
谁来决定	Cache-Control Expires	ETag/If-Not-Match Last-Modified/If-Modified-Since
操作是否有效	1、Ctrl+F5 强制刷新（无效） 2、F5刷新（无效） 3、地址栏回车（有效） 4、页面链接跳转（有效） 5、新开窗口（有效） 6、前进、后退（有效）	1、Ctrl+F5 强制刷新（无效） 2、F5刷新（有效） 3、地址栏回车（有效） 4、页面链接跳转（有效） 5、新开窗口（有效） 6、前进、后退（有效）