url输入后的整个流程(4)-http缓存/浏览器缓存

缺乏、安全感 2022-10-01 08:45 131阅读 0赞

### http缓存策略 ###

当客户端第一次请求数据时，此时浏览器不存在缓存数据，需要向服务器请求资源，服务器在返回资源的同时返回缓存策略，http状态码为200，缓存策略存在于响应头里，缓存策略主要有强制缓存和协商(对比)缓存，客户端拿到后将数据和缓存策略缓存到浏览器。

#### 强制缓存 ####

对于强制缓存，服务器响应头会有2个字段来表示，expires/cache-control。

*  expire  
    expires是一个时间戳，代表资源过期时间。不过该字段是http1.0的，现在浏览器默认使用http1.1，所以基本不用这个字段了，而且过期时间是由服务器生成的，与客户端的时间可能存在误差，现在使用cache-control代替
 *  cache-control  
    cache-control常见的取值有：  
    max-age：缓存的内容将在多少时间后失效；  
    no-cache: 会缓存，使用协商缓存策略；  
    no-store：所以内容都不会缓存，每次请求都从服务器获取

浏览器第一次响应时将该字段返回给客户端，客户端第二次请求时，根据该字段的取值来决策，如果没有超过max-age的过期时间，则直接从浏览器缓存中取数据，状态码为200,如果超过过期时间或者有no-cache字段，则走协商缓存，如果有no-store字段则直接从服务器获取。

#### 协商缓存 ####

协商缓存是进行比较后决定是否从服务器获取资源。协商缓存的标识字段有Last-Modified/Etag(响应头里),If-Modified-Since/If-None-Match(请求头里)，这4个值之间是两两对应。

*  Last-Modified/If-Modified-Since:  
    服务器返回的Last-Modified指资源上次被修改的时间，服务器第一次响应时将修改时间放入该字段中，客户端在第二次请求时，会将该值存入到If-Modified-Since字段中发送给服务器，服务器根据该字段的取值来判断资源是否被修改过，例如，服务器第一次响应时资源修改的时间是当天下午3点，客户端在下午5点第二次请求时，告诉服务器我缓存的数据的修改时间是下午3点，服务器判断请求的资源是否在3点到5点之间被修改过，如果没有，则返回304状态码，客户端使用本地缓存，如果修改过则返回状态码200和新的数据。
 *  Etag/If-None-Match Etag是服务器端生成的，当前请求资源的唯一标识符，客户端第二次请求时将该字段缓存在If-None-Match中发送给服务器，服务器将此字段与唯一标识符对比，如果不相同则资源被修改过，返回新的资源，状态码为200，如果相同则返回状态码304，从缓存中取。
 *  为什么要设置两个字段Last-Modified和Etag?  
    资源修改时间是服务器端生成的，单位是s，如果一个资源在1s内被修改了n次，Last-Modified就会不够精准出现误差。 Etag和Last-Modified同时出现时，Etag的优先级更高。  
    **总结：**  
    第一次请求时：

第二次请求时：

#### 缓存位置 ####

讨论缓存策略的时候总是说从浏览器缓存中取数据，那缓存数据究竟存放在哪里？一度我还以为是存放在cookie中，就没搞清楚cookie和cache的区别，捂脸。  
缓存主要是对静态资源而言，如图片视频等，我们可以在 Chrome 的开发者工具中，Network -> Size 一列看到一个请求最终的处理方式：如果是大小 (多少 K， 多少 M 等) 就表示是网络请求，否则会列出 `from memory cache, from disk cache 和 from ServiceWorker`。  
它们的优先级是：(由上到下寻找，找到即返回；找不到则继续)Service Worker、Memory Cache、硬盘 Cache、网络请求

*  memory cache  
    内存中的缓存。按照操作系统的常理：先读内存，再读硬盘。几乎所有的网络请求资源都会被浏览器自动加入到 memory cache 中。但是也正因为数量很大但是浏览器占用的内存不能无限扩大这样两个因素，memory cache 注定只能是个“短期存储”。常规情况下，浏览器的 TAB 关闭后该次浏览的 memory cache 便告失效 (为了给其他 TAB 腾出位置)。而如果极端情况下 (例如一个页面的缓存就占用了超级多的内存)，那可能在 TAB 没关闭之前，排在前面的缓存就已经失效了。
 *  disk cache  
    也叫 HTTP cache，顾名思义是存储在硬盘上的缓存，因此它是持久存储的，是实际存在于文件系统中的。而且它允许相同的资源在跨会话，甚至跨站点的情况下使用，例如两个站点都使用了同一张图片。disk cache 会严格根据 HTTP头信息中的各类字段来判定哪些资源可以缓存，哪些资源不可以缓存；哪些资源是仍然可用的，哪些资源是过时需要重新请求的。当命中缓存之后，浏览器会从硬盘中读取资源，虽然比起从内存中读取慢了一些，但比起网络请求还是快了不少的。绝大部分的缓存都来自 disk cache。
 *  Service Worker  
    上述的缓存策略以及缓存/读取/失效的动作都是由浏览器内部判断进行的， 我们只能设置响应头的某些字段来告诉浏览器，而不能自己操作。

转载于:https://juejin.im/post/5cdbe0a5e51d456e5238ca8f