这一篇,彻底搞懂浏览器的缓存机制

本文详细介绍了浏览器缓存的两种类型——强制缓存和协商缓存,以及它们的工作原理。通过缓存,可以显著减少网络请求,加快页面加载,提升用户体验。资源如CSS、JS、图片等通常会被缓存。Cache-Control字段控制强制缓存,其中no-cache、no-store和max-age等属性各有作用。协商缓存依赖ETag和Last-Modified来判断资源是否更新。ETag因能精确到内容变化而更准确。了解并合理运用这些机制,能有效优化网站性能。

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

浏览器缓存分两种:强制缓存、协商缓存。

为什么需要缓存?

  • 通过缓存,减少网络请求的数量和体积,页面加载和渲染更快;
  • 网络请求不稳定,加剧页面渲染不稳定性,所以通过缓存,保证页面优先加载;
  • 总结下来就是,使用缓存,可以让页面的加载、渲染更快,提高用户体验度。

有哪些资源可以被缓存?

一般为静态资源,如 css、js、img 等。

强制缓存

强制缓存流程

  • 初次请求,服务器返回资源,和 Cache-Control
    若服务器认为该资源可以被缓存,在响应头(Response header)加上 Cache-Control;
  • 再次请求,浏览器通过 Cache-Control 判断所请求的资源是否有效,命中则直接从强制缓存中返回请求响应,无需跟服务器进行任何交互,直接从本地缓存获得资源。

Cache-Control 字段属性

  • no-cache
    不去判断强制缓存是否过期,而是强制进行协商缓存,直接向服务器发请求来验证缓存是否有效,若缓存未过期,使用本地缓存。

  • no-store
    表示禁止使用任何缓存。不用本地缓存,也不用任何服务器缓存策略,而是每次发请求需要服务器给予全新的响应。

  • max-age 缓存最大过期时间(秒级)

  • private只允许最终用户做缓存(响应中使用)

  • public允许中间路由、代理做缓存(响应中使用)

Expires 也是控制缓存,已被 cache-control 代替。

协商缓存

  • 属于服务端缓存策略
  • 服务端判断客户端资源,是否和服务端一样
  • 一致返回304,否则返回200和最新资源

协商缓存过程

  • 初次请求,返回资源和资源标识(ETag / Last-Modified);
  • 再次请求,请求头(Request header)带着资源标识(If-None-Match / If-Modified-Since),服务器判断资源最后修改时间和资源标识携带的值是否相同,来决定本地缓存资源是否最新,一致返回304,否则返回新资源和新的资源标识。

资源标识

  • ETag 资源的唯一标识,通过hash内容变化判断 —— If-None-Match
  • Last-Modified 通过资源最后修改时间判断 —— If-Modified-Since

请求头和响应头中的值一一对应,并且,再次请求时携带的资源标识的值即为上次响应头返回的值。

ETag 和 Last-Modified 优先级比较

  • 优先使用ETag
  • Last-Modified 只能精确到秒级,未超过 1s 的改变不会返回
  • 如果资源被重复生成,ETag可以更精准判断

为什么 ETag 更精准?

如果某个文件每隔一段时间重复生成,但内容相同,ETag hash值不变,所以资源不会返回,Last-Modified 还是会把他当作最新资源返回。ETag 可以判断文件内容是否相同,所以ETag 更精准。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值