HTTP:强缓存优化实践

强缓存:浏览器不会向服务器发送任何请求,直接从本地缓存中读取文件

强缓存是指浏览器在向服务器请求资源时,判断本地是否存在该资源的缓存,并判断是否过期。

如果本地缓存未过期,浏览器就直接使用本地缓存,而不会向服务器发送请求。

这样可以减少对服务器的请求,加快页面加载速度。

用流程图描述如下:

强缓存通常通过HTTP响应头的 Expires 和 Cache-Control 实现:

1、Expires :服务端返回的响应中包含一个 Expires 头,指定资源缓存的过期时间。例如:

bash 复制代码
Expires: Wed, 21 Oct 2024 07:28:00 GMT

浏览器中获取到的状态码有两种,优先级上 memory cache(内存缓存) > disk cache(磁盘缓存)

bash 复制代码
// 资源存储在内存中的缓存。这样的缓存读取速度非常快,但相对容量较小。
1、 Status Code: 200 OK (form memory cache)

// 资源存储在硬盘上的缓存。磁盘缓存可以存储更多的数据,但相对读取速度较慢
2、 Status Code: 200 OK (from disk cache)

浏览器在接收到带有 Expires 头的响应后,会将资源保存在缓存中,并在过期时间之前不会再次向服务器发送请求。

因为 Expires 值是一个固定时间,因此会受本地时间的影响,如果在缓存期间我们修改了本地时间,可能会导致缓存失效。

2、Cache-Control :使用 Cache-Control 头的 max-age 来设置资源的过期时间(单位为秒)。例如:

bash 复制代码
Cache-Control: max-age=3600

这表示资源将在 3600 秒(1 小时)后过期。浏览器收到包含 max-age 的响应后,会根据该值在本地进行缓存,并在过期之前不再向服务器发送请求该资源。

相关推荐
tedcloud1231 小时前
Docker Compose 部署 Uptime Kuma:配置 HTTPS、QQ 邮箱告警与数据备份
服务器·网络协议·ui·docker·容器·https·开源
嵌入式学习菌1 小时前
HTTP/HTTPS、MQTT/MQTTS 区别
网络协议·http·https
2501_9151063211 小时前
抓包抓到乱码或压缩字节怎么解析,TraceEagle五种查看模式和一键解码
网络协议·计算机网络·网络安全·ios·adb·https·udp
情 九11 小时前
MCP 实战 06:把 HTTP 接口接成工具,让 AI 帮你查数据
人工智能·网络协议·http·mcp
Da Da 泓12 小时前
五子棋 Web 端测试用例报告
前端·网络·websocket·网络协议·测试用例·项目
万联WANFLOW20 小时前
异地组网速度忽快忽慢到底怎么回事?直连与中继的判断方法和处理步骤
运维·网络·网络协议·p2p
步行cgn1 天前
HTTP 请求报文结构详解:请求行、请求头、请求体各自的作用
网络·网络协议·http
OpenLoong 开源社区1 天前
打破 NAT 限制,零侵入跨网络通信:基于 WebRTC 的透明 TCP 隧道跨网络通信方案
网络协议·tcp/ip·开源·webrtc·openloong开源社区
从琳开始9891 天前
从Socket到UDP回显服务器:Java网络编程完整指南
java·网络·网络协议·udp·java-ee
明天也要努力学习1 天前
HTTP 协议的基本格式和 fiddler 的用法
网络协议·http·fiddler