【JavaScript】浏览器的缓存策略：强缓存和协商缓存

川长思鸟来 2022-02-28 02:34 605阅读 0赞

#### 通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的。 ####

## 强缓存（如果命中就不会去请求服务器，返回状态码200） ##

#### 如何设置强缓存？ ####

1，设置http头：Cache-Control，以客户端相对时间为准

Cache-Control:max-age=3600（单位是秒）。

2，expires（http1.0产物）会将资源的实效日期告知客户端。  
Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，如果用户更改了本地时间，就有可能造成误差  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]

#### 当同时设置cache-control和expires时，会优先使用cache-control ####

### 协商缓存（如果资源没有做改变，那么服务端就会返回 304 状态码 Not Modify） ###

1，If-Modified-since（请求）Last-Modified （响应），  
首次请求服务器会返回资源的更新时间，  
以后请求会在请求头携带if-modified-since中带着这个时间，如果资源发生了更新，则返回新资源

2，If-None-Match（请求）和ETag （响应）  
eg：  
第一次客户端想服务器请求一个index.css，第一次响应时，服务器会在响应头添加： Etag: ‘value’  
这个value一般是index.css的md5值。 value = md5(index.css)  
第二次去请求index.css的时候浏览器会带着一个请求头： if-nont-match: ‘value’  
服务器就可以在后台比对 if-nont-match请求头和上一次etag的区别：如果相同就返回304，Not Modify，如果不同就返回新的资源，并重新设置Etag的值

##### 两者的区别： #####

![在这里插入图片描述][20190324104817626.png]  
**Etag和Catche-Control的区别：**  
Etag再次请求了服务器，如果etag和if-none-match相等就不下载文件内容，强缓存如果命中，根本就不会发起请求

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FDX2dyZWVuZXI_size_16_color_FFFFFF_t_70]: /images/20220228/8bd6c06f11284c02b22a39662e195755.png
[20190324104817626.png]: /images/20220228/fa434fdf670144688ba0de00ad21d149.png