缓存机制

之前在学 vite 时，vite开发模式基于 esbuild，现代浏览器都已经原生支持 esbuild，只要使用支持esm的浏览器开发，vite 会将源码模块的请求会根据 304 Not Modified进行协商缓存，依赖模块通过 Cache-Control:max-age=31536000,immutable进行缓存，这样就不需要再次请求资源。

那到底浏览器的缓存机制是怎么实现的呢？

浏览器第一次向服务器发起请求后拿到请求结果，会根据响应头的缓存标识，决定是否缓存，是则将请求结果和缓存标识存入浏览器缓存中。

浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中（每个请求的缓存存入）

浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识（每个请求的缓存读取）

一、 强制缓存

控制强制缓存的字段有 Expires 和 Cache-Control，Cache-Conctrol的优先级比Expires高

强制缓存会出现以下情况：

1. 不存在该缓存结果和缓存标识，强制缓存失效，直接发起请求

2. 存在该缓存结果和缓存标识，但是结果已经失效，强制缓存失效，使用协商缓存

3. 存在该缓存结果和缓存标识，且该结果还没有失效，强制缓存生效，直接浏览器缓存中返回该结果

二、 协商缓存

控制协商缓存的字段分别有：Last-Modified / If-Modified-Since和Etag / If-None-Match，其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高

当浏览器缓存中存在该缓存结果和缓存标识，且结果却失效了，此时使用协商缓存：

1. 协商缓存生效，返回304

2. 协商缓存失败，返回200和请求结果

总结来说，强制缓存优先于协商缓存，如果强制缓存(Expires和Cache-Control)生效则直接使用缓存，如果不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，如果协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存。