client hints 是浏览器主动发送的http请求头字段，提供dpr、width、viewport-width、downlink、rtt及sec-ch-ua系列等结构化客户端线索，用于服务端资源优化；需通过accept-ch响应头声明并配合permissions-policy启用，且仅限https环境。
Client Hints 是 HTML5 中由浏览器主动向服务器发送的、关于客户端设备能力与环境的 HTTP 请求头字段，不是通过 JavaScript 主动读取硬件参数（如 CPU 核心数、内存大小），而是由浏览器根据用户代理策略和安全限制，**选择性披露有限、非敏感的设备上下文信息**。它不能直接获取“硬件参数”，但能提供对资源优化（如图片适配、JS/CSS 分发）至关重要的客户端线索。
Client Hints 能提供哪些关键线索？
这些字段由浏览器自动注入（需服务端显式请求 + 用户许可），常见且实用的包括：
- DPR（Device Pixel Ratio）：设备像素比，用于响应式图片 srcset 或服务端图像缩放
- Width / Viewport-Width：CSS 像素宽度或视口宽度，辅助服务端生成合适尺寸的图片或布局
- Downlink：估算的下行网络带宽（Mbps），可用于降级高清资源
- RTT（Round-Trip Time）：网络往返延迟，结合 Downlink 可判断网络质量
- Sec-CH-UA-*（如 Sec-CH-UA, Sec-CH-UA-Mobile, Sec-CH-UA-Platform）：精简、结构化的用户代理信息，替代传统 UA 字符串，更可靠且可逐步启用
如何在服务端启用并接收 Client Hints？
Client Hints 默认不发送，需服务端通过 Accept-CH 响应头声明所需字段，并配合 Feature-Policy（旧）或 Permissions-Policy（新）控制权限（现代浏览器主要依赖后者）：
- 在 HTML 响应头中添加：
Accept-CH: DPR, Width, Viewport-Width, Downlink, RTT, Sec-CH-UA, Sec-CH-UA-Mobile, Sec-CH-UA-Platform - 同时设置权限策略（推荐）：
Permissions-Policy: ch-downlink, ch-dpr, ch-width, ch-viewport-width, ch-ua, ch-ua-mobile, ch-ua-platform - 首次请求可能无 Client Hints；浏览器会在后续请求（含重定向、子资源加载）中携带，前提是页面已收到 Accept-CH 并用户未禁用
典型优化场景与后端处理建议
拿到 Client Hints 后，服务端可做轻量决策，无需 JS 或客户端计算：
-
图片服务动态裁剪：用
Width和DPR计算目标物理像素（如 Width=375 & DPR=3 → 需 1125px 宽图），再调用 Image CDN 接口 -
JS/CSS 分支加载：根据
Sec-CH-UA-Mobile: ?1判断是否为移动设备，返回精简版 bundle 或启用/禁用某些特性 -
带宽自适应流媒体：
Downlink 时默认返回 480p 视频片段，避免卡顿 -
UA 解析升级：用
Sec-CH-UA替代传统 User-Agent，避免正则误判，获取结构化品牌、版本、是否为桌面等信息
注意事项与限制
Client Hints 不是万能硬件探测工具，有明确边界：
- 无法获取内存容量、CPU 型号、GPU 型号、电池状态等敏感或不可靠信息
- 部分字段（如
Sec-CH-UA-Full-Version-List）需额外权限且仅限安全上下文（HTTPS） - 移动端 Safari 对部分 Client Hints 支持有限（如 Downlink/RTT 在 iOS 16.4+ 才支持）
- 必须配合 HTTPS，HTTP 站点会被浏览器忽略 Accept-CH
- 用户可在浏览器设置中关闭“发送浏览上下文提示”，此时字段为空或缺失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
