【浏览器】缓存机制

1. 前言

        浏览器缓存分为强制缓存和协商缓存，过程如下：

Step 1：浏览器发送请求前，根据请求头Cache-Control和Expires判断是否命中强缓存，如果命中强缓存，直接从缓存获取资源，且不会发送请求。

Step 2：如果未命中强缓存，浏览器会向服务器发送请求，服务器根据请求头的If-None-Match和If-Modified-Since判断是否命中协商缓存，如果命中，直接从缓存获取资源。

Step 3：如果未命中协商缓存，则从服务获取资源。

        本篇浏览器缓存机制做一下梳理和总结。

2. 强缓存

• 第一请求，没有缓存结果和缓存标识，直接向服务器发送请求
• 存在缓存结果和缓存标识，但强缓存已失效，则使用协商缓存
• 存在缓存结果和缓存标识，且强缓存有效，直接返回缓存中的资源

HTTP头	说明
Cache-Control	功能：用于控制网页绑上 取值： no-cache - 不使用强缓存 no-store - 不使用缓存（强缓存和协商缓存） max-age=xx（xx是number类型）-缓存在xx秒后失效 注：Cache-Control是HTTP1.1的规则	作为响应头 作为请求头
Expires	功能：缓存过期时间，指定资源到期的时间，是服务器端的绝对时间点 Expires = max-age + 请求时间 注：Expires是HTTP 1.0的产物，受限于本地时间，如修改本地时间，可能造成缓存失效	作为响应头

3. 协商缓存

        携带If-None-Match和If-Modified-Since请求头向服务器发起请求：

• 协商缓存有效，返回304 Not Modified
• 协商缓存无效，返回200 OK和请求结果

HTTP头	说明
Etag	功能：浏览器首先发送一个请求，让服务器响应头中Etag带上标记资源文件的哈希值	作为响应头
If-None-Match	功能：浏览器在下次请求中，请求头If-None-Match带上Etag的值，和服务器端资源的Etag值进行比对，一致的话，表示资源未改变，服务器返回正文为空的响应，让浏览器从缓存读取资源。	作为请求头
Last-Modified	功能：浏览器首先发送一个请求，让服务端响应头中Last-Modified带上资源上次更新时间 注：Last-Modified保存的是绝对时间，单位以秒为单位，就感知不到1秒内资源改变，各环境读的时间可能不一样	作为响应头
If-Modfied-Since	功能：浏览器在下次请求中，请求头If-Modified-Since带上Last-Modfied的值，和服务端资源修改时间进行比对，一致的话，表示资源未改变，服务器返回正文为空的响应，让浏览器从缓存读取资源。	作为请求头

4. 其他

•  在浏览器地址栏输入地址，查找disk cache中是否匹配，有匹配则使用，没有匹配就发送网络请求
• F5刷新，memory cache可以使用，有就使用，没有再从disk cache中找
• Ctrl+F5，浏览器不使用缓存，发送请求头带上Cache-Control: no-cache（同时还带上Pragma: no-cache），服务器返回200 OK和最新内容

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~