前端缓存问题

前端缓存问题

前端缓存分为http缓存浏览器缓存

http缓存

http缓存又分为:
1.强缓存
2.协商缓存

两者的区别是使用本地缓存的时候是否需要向服务器验证本地缓存是否有效,协商缓存需要向服务器协商是否使用本地缓存。

强缓存
当浏览器向服务器发起请求时,服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器。

协商缓存
仅仅是以缓存过期了并不意味着他和原始服务器目前处于活跃状态的文档有实际的区别,这只是意味着到了要进行核对的时间了,这种情况被称为协商缓存。

浏览器缓存

当浏览器请求一个网站的时候,会加载各种各样的资源,比如:HTML文档、图片、CSS和JS等文件。对于一些不经常变的内容,浏览器会将他们保存在本地的文件中,下次访问相同网站的时候,直接加载这些资源,加速访问。

优点:
1.减少页面加载时间;
2.减少服务器负载;

DNS缓存
我们知道url其实只是一个别名,真实的服务器请求地址,实际上是一个IP地址。获得IP地址的方式,就是查询DNS映射表。虽然这是一个非常简单的查询,但如果每次用户访问一个url都去查询DNS一次,未免显得太频繁。DNS会告诉你,你别老是经常过来,万一我挂了,我们就无法愉快地玩耍了。

DNS查询过程大约消耗20毫秒,在DNS查询过程中,浏览器什么都不会做,保持空白。如果DNS查询很多,网页性能会受到很大影响,因此需要用到DNS缓存。
不同浏览器的缓存机制不同: IE对DNS记录默认的缓存时间为30分钟,Firefox对DNS记录默认的缓存时间为1分钟,Chrome对DNS记录默认的缓存时间为1分钟。

缓存时间长:减少DNS的重复查找,节省时间。
缓存时间短:及时检测服务器的IP变化,保证访问的正确性。

CDN缓存
cdn缓存是一种服务端缓存,CDN服务商将源站的资源缓存到遍布全国的高性能加速节点上,当用户访问相应的业务资源时,用户会被调度至最接近的节点最近的节点ip返回给用户,在web性能优化中,它主要起到了,缓解源站压力,优化不同用户的访问速度与体验的作用。

流程

客户端访问网站的过程:没有CDN:

1.用户在浏览器访问栏中输入要访问的域名;
2.浏览器向DNS服务器请求对该域名的解析;
3.DNS服务器返回该域名的IP地址给浏览器
4.浏览器使用该IP地址向服务器请求内容。
5.服务器将用户请求的内容返回给浏览器。

使用了CDN:

1.用户在浏览器中输入要访问的域名。
2.浏览器向DNS服务器请求对域名进行解析。由于CDN对域名解析进行了调整,DNS服务器会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。
3.CDN的DNS服务器将CDN的负载均衡设备IP地址返回给用户。
4.用户向CDN的负载均衡设备发起内容URL访问请求。
5.CDN负载均衡设备会为用户选择一台合适的缓存服务器提供服务。选择的依据包括:根据用户IP地址,判断哪一台服务器距离用户最近;根据用户所请求的URL中携带的内容名称,判断哪一台服务器上有用户所需内容;查询各个服务器的负载情况,判断哪一台服务器的负载较小。基于以上这些依据的综合分析之后,负载均衡设置会把缓存服务器的IP地址返回给用户。
6.用户向缓存服务器发出请求。
缓存服务器响应用户请求,将用户所需内容传送到用户。如果这台缓存服务器上并没有用户想要的内容,而负载均衡设备依然将它分配给了用户,那么这台服务器就要向它的上一级缓存服务器请求内容,直至追溯到网站的源服务器将内容拉取到本地。

缓存规则

首次访问,下载网站的静态资源(如:JS、CSS、图片等)到本地
第二次访问浏览器从缓存中加载资源,不再请求服务器,提高网站访问速度
使用CDN当浏览器缓存过期,浏览器不是直接向原站点请求资源,而是想CDN最近站点请求
CDN最近站点也是有缓存的,如果缓存过期,那么就由CDN最近站点向原站点发送请求获取最新资源
CDN节点缓存机制在不同服务商中是不同的,但一般都遵循HTTP协议,通过http响应头中的Cache-Control:max-age的字段来设置CDN节点文件缓存时间。当客户端向CDN节点请求数据时,CDN会判断缓存数据是否过期,若没有过期,则直接将缓存数据返回给客户端,否则就向源站点发出请求,从源站点拉取最新数据,更新本地缓存,并将最新数据返回给客户端。

CDN缓存时间会对“回源率”产生直接的影响,若CDN缓存时间短,则数据经常失效,导致频繁回源,增加了源站的负载,同时也增大了访问延时;若缓存时间长,数据更新时间慢,因此需要针对不同的业务需求来选择特定的数据缓存管理。

原文链接:https://blog.csdn.net/gongch0604/article/details/102726780

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端离线缓存可以通过HTML5的离线存储(Application Cache)来实现。该机制是基于一个manifest文件的缓存机制,通过在manifest文件中定义需要缓存的文件,浏览器会将这些文件保存在本地。当网络处于离线状态时,浏览器会使用离线存储的数据进行页面展示。这种机制主要适用于内容变动少、相对固定的场景下。 另外,还可以借助Service Worker和cacheStorage缓存来实现离线缓存。Service Worker是一种在浏览器后台运行的脚本,可以拦截网络请求并缓存响应,从而实现离线缓存。cacheStorage是浏览器提供的API,用于管理缓存的存储空间。 在实际开发中,可以使用Workbox webpack Plugins等工具来简化离线缓存的配置和管理。这些工具可以帮助我们生成Service Worker脚本,并提供一些方便的API来管理缓存和离线状态。 总结起来,前端离线缓存可以通过HTML5的离线存储、Service Worker和cacheStorage缓存等技术来实现。这些技术可以提供离线访问和更好的用户体验。 #### 引用[.reference_title] - *1* *2* *3* [【万字长文】前端离线化/长缓存方案](https://blog.csdn.net/sinat_36521655/article/details/120051358)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值