---

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

tags: [Client Hints, Accept-CH, DPR, Width, Save-Data, UA-CH]

description: 利用 Client Hints（UA-CH、DPR、Width、Save-Data）实现图片与资源的按特征协商，降低带宽与加速加载，并提供服务端配置、隐私治理与经过验证的指标。

categories:

• 应用软件
• 下载工具

---

背景与价值

• 通过客户端特征提示（如设备像素比、视口宽度、节省数据偏好），服务器可选择更合适的资源版本。
• 相比纯前端 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 配置正确，变体切换后不串内容。
• 兼容：不支持提示的浏览器仍得到可接受的资源质量。

应用场景

• 首屏大图、产品图、视频封面与预览图、自适应脚本/样式的轻量版本分发。