浏览器的缓存机制 - 易塔云建站-模板下载,web开发资源,技术博客

浏览器的缓存机制发布于：2023-07-03 16:56:02 来源：CSDN 查看：60 讨论：0

浏览器的缓存机制指的就是HTTP缓存机制，就是根据HTTP报文的缓存标识进行的

一、缓存的过程分析：

每次发送请求都会先在浏览器缓存中查找结果和缓存标识，有则进行强制缓存或协商缓存规则，没有则向服务器发送请求，浏览器发起请求拿到返回结果后，根据HTTP头的缓存标识决定是否缓存到浏览器缓存中，是的话就将请求结果和缓存标识存入，浏览器就会把资源缓存在memory cache 或 disk cache中。

二、缓存的优点

1 降低服务器压力，减少请求次数。

2 提升性能，本地资源加载比请求服务器快

3 减少带宽消耗，产生很小的网络消耗。

三、强制缓存

当发送请求时，在浏览器缓存中找到请求结果和缓存标识都未失效，则进行强制缓存直接返回缓存结果

通过Expires方法和 Cache-Control方法设置过期时间，Expires比 Cache-Control优先级低

四、协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，服务器返回304，则表示资源无更新，协商缓存生效，使用浏览器缓存结果。若返回的是200则协商缓存失效，返回请求结果。

通过Last-Modified（根据文件修改时间来决定是否从缓存取数据）与Etag方法（根据文件内容是否修改来决定是否从缓存取数据）

五、缓存机制流程

浏览器页面加载时先查找是否有缓存，如果有则不直接向服务器发送请求，没有则直接发送请求，当有缓存时先判断缓存标识是否过期，如果没有则直接执行强制缓存，返回缓存的请求结果，如果已经过期则携带缓存标识码向服务器发送请求，如果资源无更新则返回304，协商缓存生效继续使用缓存结果，反之资源更新了则返回200并返回请求结果存入浏览器缓存。

上一篇：vue2 和 vue3 的区别？下一篇：js 中 for...in 和 for...of 的区别和使用

评论

最新文章

热门笔记

可以直接扫码关注本站

易塔云建站：15811355317

微信扫一扫，添加好友