浏览器的缓存机制 优点 缺点 协商缓存和强缓存 浏览器缓存过程 如何判断强缓存是否过期

本文介绍了浏览器缓存的机制,包括缓存的优点和缺点,详细解析了强缓存和协商缓存的工作流程,并阐述了如何判断强缓存是否过期,帮助理解浏览器如何管理和使用缓存资源。

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

缓存的优点:

  • 减少了不必要的数据传输,节省带宽
  • 减少服务器的负担,提升网站性能
  • 加快了客户端加载网页的速度
  • 用户体验友好

缺点

资源如果有更改,会导致客户端不及时更新就会造成用户获取信息滞后

当浏览器去请求某个文件的时候,服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制

浏览器缓存主要有两类:缓存协商和彻底缓存,也有称之为协商缓存和强缓存。

1.强缓存:不会向服务器发送请求,直接从缓存中读取资源,在chrome控制台的network选项中可以看到该请求返回200的状态码;

2.协商缓存:向服务器发送请求,服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存,如果命中,则返回304状态码并带上新的response header通知浏览器从缓存中读取资源;

两者的共同点是,都是从客户端缓存中读取资源;区别是强缓存不会发请求,协商缓存会发请求。

浏览器缓存过程

1.浏览器第一次加载资源,服务器返回200,浏览器将资源文件从服务器上请求下载下来,并把response header及该请求的返回时间一并缓存;

2.下一次加载资源时,先比较当前时间和上一次返回200时的时间差,如果没有超过cache-control设置的max-age,则没有过期,命中强缓存,不发请求直接从本地缓存读取该文件(如果浏览器不支持HTTP1.1ÿ

### HTTP缓存机制中的强缓存协商缓存 #### 强缓存示例 当浏览器首次请求某个资源时,服务器会在响应头中设置`Cache-Control`或`Expires`字段来指示该资源可以被缓存的时间长度。假设有一个图片文件 `example.png` 的HTTP响应如下: ```http HTTP/1.1 200 OK Date: Mon, 27 Mar 2023 12:00:00 GMT Cache-Control: max-age=86400 Content-Type: image/png Content-Length: 12345 ... ``` 在这个例子中,`max-age=86400` 表明此资源可以在客户端缓存一天(86400秒)。如果用户在同一天内再次访问同一页面并尝试加载这张图片,浏览器将直接从本地缓存读取而不再发起新的网络请求[^1]。 #### 协商缓存示例 对于超过强缓存有效期后的资源请求,浏览器会带上特定的头部信息去询问服务器是否有更新版本可用。比如,在上述情况下过了24小时之后再请求相同的图片,此时浏览器发出的GET请求可能像这样: ```http GET /images/example.png HTTP/1.1 Host: www.example.com If-None-Match: "abcde-fghij" If-Modified-Since: Mon, 27 Mar 2023 12:00:00 GMT ``` 这里包含了两个用于验证缓存有效性的条件:`If-None-Match` `If-Modified-Since`。服务器接收到这样的请求后会对这两个条件进行检查;如果没有变化则回复304 Not Modified状态码告知浏览器继续使用已有的缓存副本;如果有新版本,则正常返回最新的内容以及相应的200状态码完整的实体主体[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值