强缓存与协商缓存 #

https://juejin.cn/post/7065895592613904392

什么是缓存？ #

浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力

http缓存机制主要在http响应头中设定，响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag。

HTTP 1.0协议中的。简而言之，就是告诉浏览器在约定的这个时间前，可以直接从缓存中获取资源（representations），而无需跑到服务器去获取。

缓存的类别 #

浏览器缓存分为强缓存和协商缓存

强缓存 #

强缓存是通过设置响应头中的 Expires 或 Cache-Control 来实现的，这两个字段可以告诉浏览器在一定时间内直接使用本地缓存，而不向服务器发送请求，直接从本地缓存中读取文件并返回Status Code: 200 OK

可以由这两个字段其中一个决定

• expires
• cache-control(优先级更高)

cache-control是http1.1的头字段，expires是http1.0的头字段,如果expires和cache-control同时存在，cache-control会覆盖expires，建议两个都写。

在时效时间内，不走服务端，只走本地缓存

协商缓存 #

浏览器向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；

可以由这两对字段中的一对决定

• Last-Modified，If-Modified-Since
• Etag，If-None-Match(优先级更高)

Last-Modified，If-Modified-Since #

第一次请求资源时，服务端会把所请求的资源的最后一次修改时间当成响应头中Last-Modified的值发到浏览器并在浏览器存起来

第二次请求资源时，浏览器会把刚刚存储的时间当成请求头中If-Modified-Since的值，传到服务端，服务端拿到这个时间跟所请求的资源的最后修改时间进行比对

比对结果如果两个时间相同，则说明此资源没修改过，那就是命中缓存，那就返回304，如果不相同，则说明此资源修改过了，则没命中缓存，则返回修改过后的新资源

Etag，If-None-Match #

• Last-Modified，If-Modified-Since是对比资源最后一次修改时间，来确定资源是否修改了
• Etag，If-None-Match是对比资源内容，来确定资源是否修改

应用场景-vite #

vite资源用协商缓存，依赖用强缓存