让页面加载速度翻倍http_study实战Cache-Control与条件请求两大核心武器【免费下载链接】http_studyfollow me to study http项目地址: https://gitcode.com/gh_mirrors/ht/http_study 想让网站秒开http_study是一个跟随《透视HTTP协议》实战的开源项目基于 OpenResty Nginx 手把手带你玩转 HTTP 缓存。本文聚焦Cache-Control 强缓存与条件请求弱缓存两大核心武器教你用最小成本让页面加载速度翻倍。为什么缓存能让页面飞快想象一下每次打开页面浏览器都要向服务器重新下载一遍 CSS、JS、图片——这就是重复劳动。HTTP 缓存的作用就是告诉浏览器这份资源一段时间内不用再来问我强缓存你手里的那份还新鲜吗新鲜就直接用条件请求 / 弱缓存配置得当的缓存可以让 80% 以上的静态请求省掉往返首屏时间直接减半。http_study项目内置了完整的实验环境我们用curl就能亲眼看到缓存生效的全过程。武器一Cache-Control 强缓存让浏览器闭眼加载强缓存由响应头Cache-Control控制其中最常用的就是max-age——在有效期内浏览器直接读本地根本不发出请求。项目的 www/lua/20-1.lua 就是一个最小演示脚本核心只有一行ngx.header[Cache-Control] max-age30启动项目后Docker 方式docker run -it --rm chronolaw/http_study访问一下curl -i http://127.1/20-1观察响应头中的Cache-Control: max-age30在 30 秒内再次请求浏览器不会发起任何网络请求页面自然秒开。脚本还支持通过?need_expires1参数追加Expires头方便你对比新旧两种缓存头的区别。Cache-Control 常用指令速查表指令含义适用场景max-ageNN 秒内直接使用本地缓存带版本号的静态资源no-cache每次请求都先验证再使用会频繁更新的内容no-store完全不缓存敏感数据如登录页must-revalidate过期后必须回源验证对时效性要求高的数据武器二条件请求弱缓存用 304 省掉流量强缓存过期后怎么办靠条件请求浏览器带着上次拿到的凭证再问一次服务器确认没变就返回304 Not Modified只有响应头、没有响应体流量几乎为零。两个最关键的凭证头ETag资源的唯一指纹精确到内容Last-Modified资源的最后修改时间项目的 www/lua/20-2.lua 完整演示了这个流程ngx.header[Cache-Control] max-age10, must-revalidate ngx.header[ETag] string.format(%x-%x, time, #str)实战体验一下# 第一次请求拿到 ETag curl -i http://127.1/20-2 # 第二次带上 ETag 再问一次 curl -i -H If-None-Match: 刚才拿到的ETag http://127.1/20-2如果资源没变第二次会收到304——响应体为空浏览器继续使用本地缓存。这就是弱缓存 强验证的黄金组合。 小技巧ETag 比 Last-Modified 更精确后者只精确到秒生产环境两者可以同时使用互为补充。进阶代理缓存——让 Nginx 替你扛流量浏览器缓存解决的是用户侧而反向代理缓存解决的是服务器侧。多个用户请求同一资源时Nginx 直接从缓存目录返回源站压力骤降。http_study的 www/conf/http/cache.conf 定义了代理缓存区proxy_cache_path cache keys_zonewww_cache:64k inactive10s;www/conf/http/servers/locations.inc 中的/proxy_cache/位置开启缓存并回源到origin.io源站脚本 www/lua/origin.lua 通过public, max-age10, s-maxage30分别控制浏览器缓存 10 秒、代理缓存 30 秒并同时返回 ETag 供验证。最妙的是 www/lua/cache_filter.lua它在响应头中实时注入X-CacheHIT/MISS和X-Hit命中率一行 curl 就能验证缓存是否真的在省钱curl -i http://127.1/proxy_cache/cache连续请求两次看响应头从X-Cache: MISS变成X-Cache: HIT命中率X-Hit随之上升——缓存生效肉眼可见。总结页面加速的三大关键动作 ✅静态资源开强缓存Cache-Control: max-age31536000, immutable 文件名带 hash 版本号动态内容用条件请求no-cache ETag让 304 帮你省流量Nginx 加一层代理缓存proxy_caches-maxage把源站挡在身后http_study项目把这些知识点都做成了可运行的实验完整环境可用git clone https://gitcode.com/gh_mirrors/ht/http_study获取参考 docker/Dockerfile 一键启动。跟着动手跑一遍Cache-Control 与条件请求就不再是纸面概念而是你工具箱里让页面飞速运转的两大核心武器。【免费下载链接】http_studyfollow me to study http项目地址: https://gitcode.com/gh_mirrors/ht/http_study创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考