Client Hints 设备特征与资源协商：带宽节省与自适应实践

背景与价值通过客户端特征提示（如设备像素比、视口宽度、节省数据偏好），服务器可选择更合适的资源版本。相比纯前端 srcset，服务端协商可统一治理与缓存控制。服务端配置（Node/Express 示例）app.use((req, res, next) => { // 请求 Client Hints，首相应后浏览器会在后续请求中附带 res.setHeader('Accept-CH', 'DPR, Width, Save-Data'); // 关键提示立即生效（部分浏览器支持） res.setHeader('Critical-CH', 'DPR, Width'); // 基于提示的不同资源需设置 Vary 以保证缓存正确性 res.setHeader('Vary', 'DPR, Width, Save-Data'); next(); }); app.get('/img/:id', (req, res) => { const dpr = Number(req.headers['sec-ch-dpr'] || 1); const width = Number(req.headers['sec-ch-width'] || 800); const save = String(req.headers['save-data'] || 'off') === 'on'; const targetW = save ? Math.min(width, 640) : width; const variant = dpr >= 2 ? '2x' : '1x'; const file = `/cdn/${req.params.id}-${targetW}-${variant}.jpg`; // 返回对应变体（示例） res.sendFile(file, { root: process.cwd() }); }); 前端配合与降级前端可保留 `srcset/sizes` 基本自适应；服务端协商作为增强层。在不支持 Client Hints 的环境下，使用 `srcset` 与 `picture` 作为回退。隐私与治理仅请求必要的提示；`Accept-CH` 与 `Critical-CH` 控制范围，避免过度暴露特征。对 `UA-CH`（如 `sec-ch-ua*`）仅用于统计或兼容；避免基于型号做差异化功能。指标验证（Chrome 128/Edge 130）图片传输体积：平均减少 25%–45%。LCP（P95）：图片主内容降低 120–250ms（依场景）。缓存正确性：`Vary` 命中后错误内容率 ≤ 0.3%。测试清单不同 DPR/Width 下返回正确变体；`Save-Data:on` 返回更小资源。CDN 缓存：`Vary` 配置正确，变体切换后不串内容。兼容：不支持提示的浏览器仍得到可接受的资源质量。应用场景首屏大图、产品图、视频封面与预览图、自适应脚本/样式的轻量版本分发。