前端缓存

本文介绍了前端缓存的两种类型——浏览器缓存和CDN缓存。浏览器缓存通过Cache-Control、Expires、Last-modified、Etag和Max-age等机制进行控制。CDN缓存则在浏览器本地缓存失效后提供加速服务,但可能面临数据更新不及时的问题。讨论了各种缓存策略的优缺点及其应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端缓存分为浏览器缓存和cdn缓存。
怎样区分浏览器缓存和cdn缓存
通过Cache-control
public:表示缓存的版本可以被代理服务器或者其他中间服务器识别(浏览器,cdn都能缓存)
private:表示这个文件对不同的用户是不同的。只有用户自己的浏览器能够进行缓存,公共的代理 服务器不允许缓存
no-cache:表示当前的内容不应该被缓存

浏览器缓存:
不仅要知道有什么(现在只停留在这里)还要知道他们的区别和使用场景。资源指的都是服务端的资源。
Expires:
规定资源的有效时间
应用:可以在html中规定
css,图片的有效时间可以在相应头里使用expires规定
缺点:当浏览器和服务器的时间相差很大时,误差就会很大。可以使用Max-age来代替。
Last-modified:
规定资源最近更新的时间,和请求头的if-modified-since对应
A .当第一次向服务器请求资源时,返回状态200,这时Last-modified里面就会保存最近一次修改文件的时间;
B . 当浏览器再次请求该资源时,就会发送一个if-modified-since的请求头,就是为了判断当前的资源是否有变更;
C .如果当前资源没有变更的话,就会返回304状态码,内容为空;如果有变更并且成功,服务器则会返回200状态码,内容为请求的资源。
Etag:

服务器当前资源的唯一标识
过程和Last-modified过程类似,不过与之对应的请求头为if-none-match
Max-age:

Cache-control规定资源在本地的存储时间

上面几个的区别:
当Expires和Max-age同时存在时,会按照Max-age规定的时间;
Last-modified和Expires每次都会发送一次http请求,但是Expires不会,除非是你主动的刷新页面时;

从资源协议来看,Last-modified和Etag差不多,为什么http要搞两个标识呢?
Last-modified的缺点:
集群服务器上各个服务器上的文件时间可能不同;
时间精度要求高,在S级别;

cdn缓存:
浏览器本地缓存失效后,浏览器就会向cdn的边缘节点发起请求;
优点:减少了访问读取数据的时间;
缺点:当网站更新但cdn没有及时更新时,不能保证读取的数据为最新的资源;
过程:当浏览器向cdn节点发送请求时,cdn节点会判断当前的缓存数据是否有效,如果有效就会直接返回给浏览器;否则,cdn节点就会向源节点发送请求,源站点返回最新的数据,更新本地缓存并返回给浏览器;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值