HTML浏览器缓存(Browser Cache)

介绍:

浏览器缓存是Web缓存中最直接、最常见的一种形式。当浏览器首次请求某个资源时,如果服务器响应中包含了缓存控制指令(如Cache-Control、Expires等),浏览器就会将这些资源存储在本地缓存中。后续请求相同资源时,如果缓存未过期,浏览器将直接从缓存中加载资源,而无需再次向服务器发起请求。

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

一、强制缓存

浏览器第一次向服务器发送请求,服务器返回资源,并设置Cache-Control: max-age=一串数字,这一串数字就是过期时间,例如设置一小时后过期,则max-age=3600。

浏览器第二次向服务器发送请求。

如果max-age没有过期,例如在一小时内请求资源,则从缓存中拿资源。

如果max-age已过期,则进行下一步判断协商缓存。

代码示例(设置HTTP响应头以控制缓存):

javascript 复制代码
HTTP/1.1 200 OK  
Cache-Control: max-age=3600  // 缓存有效期为1小时  
Content-Type: text/html  
...

二、协商缓存

关键词:Last-Modified、E-Tag

浏览器第一次向服务器发送请求,服务器返回资源,并设置资源标识(Last-Modified或者E-Tag),将资源和标识码存在缓存中。

浏览器第二次向服务器发送请求和资源标识(If-Modified-Since或者If-None-Match),服务器根据资源标识判断当前缓存里的资源是否是最新资源。

如果不是最新资源,服务器返回状态码200并重新发送最新资源和最新的资源标识码。

如果是最新资源,服务器返回状态码304,并从缓存中拿资源。

资源标识

  • Last-Modified:资源上一次修改的时间。对应发送请求的资源标识:If-Modified-Since
  • ETag:资源对应的唯一字符串。对应发送请求的资源标识:If-None-Match

优先使用ETag,更精确。

相关推荐
怪兽学LLM19 小时前
AI 应用中的高并发处理:从限流、异步到缓存与队列
人工智能·缓存
喜欢的名字被抢了1 天前
长会话状态治理:当Redis失忆后,系统如何自己找回忆
数据库·redis·缓存
Alan_6911 天前
商品详情优化三板斧-拆分-多级缓存-GC调参
后端·缓存
難釋懷2 天前
Nginx-proxy缓存断点续传缓存 range
运维·nginx·缓存
杨运交2 天前
[053][核心模块]Java枚举缓存与ORM集成实践
java·开发语言·缓存
liulilittle2 天前
LLM推理中的KV缓存与跨请求前缀复用:机制、条件与提示词
缓存·ai·llm
智码看视界2 天前
Day33-数据层 × 中间件AI化篇:Redis缓存经典问题-击穿、穿透、雪崩的终极解决方案
数据库·redis·缓存·中间件·穿透·雪崩·击穿
難釋懷2 天前
Nginx-proxy缓存清理
运维·nginx·缓存
咩咩啃树皮2 天前
第43篇:Vue3计算属性(computed)完全精讲——缓存机制、依赖计算、业务最优解
前端·vue.js·缓存
海兰3 天前
【高速缓存】RedisVL 存储类型选择指南:Hash 与 JSON
人工智能·redis·算法·缓存·json·哈希算法