HTTP:强缓存优化实践

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

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

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

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

用流程图描述如下:

强缓存通常通过HTTP响应头的 ExpiresCache-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 的响应后,会根据该值在本地进行缓存,并在过期之前不再向服务器发送请求该资源。

相关推荐
im_AMBER31 分钟前
计网 01 WebSocket | MDN
网络·websocket·网络协议
m0_495562781 小时前
https的原理
网络协议·http·https
TO_ZRG3 小时前
Base64原理、Http Header
网络·网络协议·http
q***82913 小时前
Nginx中$http_host、$host、$proxy_host的区别
运维·nginx·http
@hdd3 小时前
libsoup 调用http API报错 unacceptable TLS certificate
http·soup
小小测试开发5 小时前
JMeter HTTP URL重写修饰符用法详解:解决会话传递与URL参数动态处理
网络协议·jmeter·http
red watchma5 小时前
OTA的HTTP笔记
笔记·网络协议·http
LaoZhangGong1235 小时前
TCP数据包格式分析
网络·网络协议·tcp/ip·以太网
老蒋新思维5 小时前
创客匠人 2025 高峰论谈(11.22-25):AI 智能体重构创始人 IP 打造与知识变现的管理逻辑
大数据·网络·人工智能·网络协议·tcp/ip·重构·知识付费
草莓熊Lotso7 小时前
C++ STL map 系列全方位解析:从基础使用到实战进阶
java·开发语言·c++·人工智能·经验分享·网络协议·everything