缓存机制

发布网友发布时间：2022-12-11 00:08

共1个回答

热心网友时间：2024-12-04 04:54

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

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

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

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

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

一、强制缓存

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

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

二、协商缓存

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

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

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