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,更精确。

相关推荐
梅孔立4 小时前
两种免费的翻译API调用方式详解 - Edge官方API与个人缓存服务
前端·缓存·edge
gwf2164 小时前
SSD读写速度深度解析:顺序读写vs随机读写、IOPS、延迟,你的硬盘性能到底怎么看?
git·嵌入式硬件·缓存·github·智能硬件
番茄炒鸡蛋加糖6 小时前
缓存三大问题
缓存
江晓鱼未暖11 小时前
十七、Redis 核心原理与架构详解
大数据·数据库·数据仓库·redis·缓存·架构
小罗水11 小时前
第13章 Redis 缓存、幂等锁与任务状态
数据库·redis·缓存
热心市民lcj12 小时前
Spring Boot 整合 Caffeine 本地缓存实战
spring boot·后端·缓存
zx11545013 小时前
【热点 Key 探测与加长缓存 TTL 实战】
缓存
toooooop81 天前
如何用 ss + ps 精准定位本机 Redis 的“隐形”消费者?
linux·数据库·redis·缓存
软萌萌的11 天前
C#中的多级缓存架构设计与实现深度解析
缓存·c#·wpf
醉城夜风~1 天前
HTML表单域学习博客:表单标签、输入框、按钮详解
android·java·缓存