前端面经 强缓存与协商缓存

前端面经 强缓存与协商缓存

图片多来自第三方平台

缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定

	获取资源形式	状态码	发送请求到服务器
强缓存	从缓存取	200(from cache)	否，直接从缓存取
协商缓存	从缓存取	304(not modified)	是，通过服务器来告知缓存是否可用

强缓存相关字段有expires，cache-control。如果cache-control 与expires 同时存在的话，cache-control 的优先级高于expires。
协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match

适用场合

因为服务器上的资源不是一直固定不变的，大多数情况下它会更新，这个时候如果我们还访问本地缓存，那么对用户来说，相当于资源没有更新，用户看到的还是旧的资源
所以我们希望服务器上的资源更新，浏览器就请求新的资源，没有更新就使用本地的缓存，以最大程度的减少因网络请求而产生的资源浪费

浏览器缓存的过程

1. 在浏览器第一次发起请求时，本地无缓存，向web服务器发送请求，服务器响应请求，浏览器缓存。过程入下：
   
   在第一次请求时，服务器会将页面最后修改时间通过Last-Modified标识由服务器发送给客户端，客户端记录时间；服务器还会生成一个Etag，并发送给客户端

2. 浏览器后续再次进行请求时：
   

• 浏览器在请求某一资源时，会线获取该资源缓存的header信息，判断是否命中强缓存（是否由cache-control和expires信息），若命中则根据cache-control的max-age判断是否过期，没有过期直接从缓存中获取资源信息，包括缓存header信息；本次请求根本就不会与服务器进行通信
• 如果没有命中强缓存，或缓存过期。浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服务器根据请求中的相关header信息来比对结果是否协商缓存命中；
  • 若命中（requst header返回的If-None-Match和If-Modified-Since与服务器的Etag和Last-Modified相同），则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取
  • 否则返回最新的资源内容

304：如果客户端发送了一个带条件的GET请求且该请求已被允许，而文档的内容（自上次访问以来或根据请求的条件）并没有改变，则服务器应当返回304状态码

缓存规则

强缓存（本地缓存）

直接从缓存中获取资源而不经过服务器，前提是资源没过期。

即如果资源没过期，就取缓存，如果过期了，则请求服务器。

如何判断资源是否过期呢，也就是说强缓存的规则怎么看？
主要是看response header中的Cache-Control

Cache-Control设定值：

• max-age=xxx：过期时间
• no-cache：不使用强缓存（本地缓存）。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
• no-store：不强缓存，也不协商缓存。直接禁止浏览器缓存数据，每次请求资源都会向服务器发送一个请求，每次都会下载完整的资源
• public：浏览器和CDN等中间代理服务器都可以缓存
• private：仅服务器缓存，不允许CDN等中继缓存服务器对其缓存

缓存保存的位置：

• 内存缓存：具有两个特点，分别是快速读取和时效性
  • 快速读取：内存缓存会将百衲衣解析后的文件，直接存入进程的内存，占据该进程一定的内存资源，以方便下次运行使用时的快速读取
  • 时效性：一旦该进程关闭，则该进程的内存则会清空
• 硬盘缓存：硬盘缓存则时直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入 内容缓存，那么当刷新页面时只需直接从内存缓存中读取


css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存

协商缓存

触发条件：

1. Cache-Control的值为no-cache（不强缓存）
2. 或者max-age过期
   

图中，虽然强缓存命中，但是也有ETag和Last-Modified，这两个就是协商缓存相关规则

Etag：服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）

If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有ETag声明，则再次向服务器请求时带上头If-None-Match（ETag的值）。服务器收到请求后发送头If-None-Match则于被请求资源的相应校验串进行比对，决定是否协商缓存