浏览器缓存中怎么利用Vary请求头根据客户端不同的User-Agent或Accept-Encoding返回并缓存不同的代码产物-js教程-PHP中文网

浏览器缓存不主动根据user-agent或accept-encoding返回不同产物，而是由服务器通过vary响应头声明缓存键维度，配合真实差异化响应实现缓存区分；vary: accept-encoding使gzip与br版本独立缓存，vary: user-agent易致缓存碎片化，需后端真实适配并标准化ua以避免无效分裂。

浏览器缓存中怎么利用vary请求头根据客户端不同的user-agent或accept-encoding返回并缓存不同的代码产物

浏览器缓存本身不主动“根据 User-Agent 或 Accept-Encoding 返回不同产物”，它只负责存储和复用响应。真正实现差异化返回与缓存区分的，是服务器（如 Nginx、CDN 或应用后端）配合 Vary 响应头协同完成的——Vary 是告诉缓存系统：“这个响应是否可用，取决于请求里这些头字段的值是否匹配”。

理解 Vary 的作用机制

Vary 不是让浏览器“动态生成内容”，而是声明缓存键（cache key）的构成维度：

当响应头包含 Vary: Accept-Encoding，缓存会把 Accept-Encoding 的实际值（如 gzip、br、空）纳入缓存标识。同一 URL，gzip 版本和 br 版本会被存为两个独立缓存项。
当响应头包含 Vary: User-Agent，缓存会按 UA 字符串做区分。但 UA 取值高度离散（如含版本号、设备标识），极易导致缓存碎片化，命中率骤降。
缓存（包括浏览器、CDN、Nginx proxy_cache）在收到新请求时，先提取请求中的对应头字段值，再查找“完全匹配该值”的缓存项；不匹配则回源。

服务端如何配合生成差异产物

仅设 Vary 不够，后端必须真实依据请求头返回不同内容：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

Accept-Encoding：Web 服务器（如 Nginx）需启用压缩模块，并根据客户端请求的 Accept-Encoding 自动选择 gzip / brotli / 不压缩；后端应用若自行压缩，也需读取该头并输出对应 Content-Encoding 和正文。
User-Agent：需业务逻辑识别 UA（如用正则或库判断是否为移动端/微信内置浏览器），然后返回适配的 HTML、JS 或 CSS。例如：
– 移动端 UA → 返回精简版 JS + viewport 优化 HTML
– 桌面 Chrome → 返回完整功能 JS + WebAssembly 模块
注意：若后端对所有 UA 都返回完全相同的资源，却设置 Vary: User-Agent，只会徒增缓存分裂，毫无意义。

Nginx 中正确配置 Vary 与缓存协同

要确保 Vary 生效，必须让缓存键（proxy_cache_key）与 Vary 声明的字段严格一致：

若响应头设 Vary: Accept-Encoding，缓存键中必须包含 $http_accept_encoding：

proxy_cache_key "$scheme$request_method$host$request_uri$http_accept_encoding";

若响应头设 Vary: User-Agent，且确有必要（如 SSR 渲染不同布局），建议先标准化 UA（避免版本号波动），再写入缓存键：

map $http_user_agent $ua_type {
~*mobile|android|iphone|ipad "mobile";
default "desktop";
}
proxy_cache_key "$scheme$request_method$host$request_uri$ua_type";
add_header Vary "User-Agent";