前端浏览器缓存知识梳理(1),web开发学习教程

本文详细梳理了前端浏览器缓存的知识,包括Expires、Cache-Control、Pragma等头部字段,以及Service Worker、Memory Cache、Disk Cache等缓存位置。强调了缓存对性能提升和带宽节省的作用,并解释了强缓存和协商缓存的工作原理。文中还探讨了不同类型的浏览器缓存存储位置和特点,如Memory Cache的速度优势和Disk Cache的存储持久性。
摘要由CSDN通过智能技术生成

2.提升性能,打开本地资源肯定会比请求服务器来的快。

3.减少带宽消耗,当我们使用缓存时,只会产生很小的网络消耗,至于为什么打开本地资源也会产生网络消耗,下面会有说明。

Web缓存种类: 数据库缓存,CDN缓存,代理服务器缓存,浏览器缓存。

所谓浏览器缓存其实就是指在本地使用的计算机中开辟一个内存区,同时也开辟一个硬盘区作为数据传输的缓冲区,然后用这个缓冲区来暂时保存用户以前访问过的信息。

浏览器缓存过程: 强缓存,协商缓存。

浏览器缓存位置一般分为四类: Service Worker–>Memory Cache–>Disk Cache–>Push Cache。

1. 强缓存


强缓存是当我们访问URL的时候,不会向服务器发送请求,直接从缓存中读取资源,但是会返回200的状态码。

如何设置强缓存?

我们第一次进入页面,请求服务器,然后服务器进行应答,浏览器会根据response Header来判断是否对资源进行缓存,如果响应头中expires、pragma或者cache-control字段,代表这是强缓存,浏览器就会把资源缓存在memory cache 或 disk cache中。

第二次请求时,浏览器判断请求参数,如果符合强缓存条件就直接返回状态码200,从本地缓存中拿数据。否则把响应参数存在request header请求头中,看是否符合协商缓存,符合则返回状态码304,不符合则服务器会返回全新资源。

expires

是HTTP1.0控制网页缓存的字段,值为一个时间戳,准确来讲是格林尼治时间,服务器返回该请求结果缓存的到期时间,意思是,再次发送请求时,如果未超过过期时间,直接使用该缓存,如果过期了则重新请求。

有个缺点,就是它判断是否过期是用本地时间来判断的,本地时间是可以自己修改的。

Cache-Control

是HTTP1.1中控制网页缓存的字段,当Cache-Control都存在时,Cache-Control优先级更高&#x

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值