前端http请求细节——Cache-Control(缓存机制)

如题所述

第1个回答  2022-07-20

请求和响应中的 Cache-Control 指令并不完全相同,具体可以查看 这里 ,包括指令的具体意思,这里不过多赘述。(默认值:private)

浏览器的缓存机制是根据 HTTP 报文的缓存标识进行的,浏览器第一次向服务器发起该请求后拿到请求结果,会根据响应报文中 HTTP 头的缓存标识,决定是否缓存结果。
浏览器缓存策略分为两种:强制缓存和协商缓存。

强制缓存不会向服务器发送请求,直接从缓存中读取资源,可以看到请求返回的状态码都是200,并且 Size 代表该缓存的位置。

浏览器读取缓存的顺序为memory –> disk。

三级缓存原理 (访问缓存优先级):

在浏览器中,浏览器会在js,字体,图片等文件解析执行后直接存入内存缓存中,那么当刷新页面时只需直接从内存缓存中读取(from memory cache);而css文件则会存入硬盘文件中,所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

为什么CSS会放在硬盘缓存中?
因为CSS文件加载一次就可渲染出来,我们不会频繁读取它,所以它不适合缓存到内存中,但是js之类的脚本却随时可能会执行,如果脚本在磁盘当中,我们在执行脚本的时候需要从磁盘取到内存中来,这样IO开销就很大了,有可能导致浏览器失去响应。

若服务器的资源最后被修改时间 > If-Modified-Since的字段值
则重新返回资源,状态码为200;否则则返回304,代表资源无更新,可继续使用缓存文件

If-None-Match 的字段值 = 该资源在服务器的Etag值
一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200。

ETag 和 Last-Modified 区别

参考链接:
https://juejin.im/entry/5ad86c16f265da505a77dca4
https://www.cnblogs.com/suihang/p/12855345.html
https://www.jianshu.com/p/54cc04190252

相似回答
大家正在搜