Client Hints 响应式资源选择：DPR/Viewport-Width/ECT 与缓存协同

Client Hints 响应式资源选择：DPR/Viewport-Width/ECT 与缓存协同技术背景Client Hints 允许浏览器向服务器传递设备像素比、视口宽度与有效连接类型（ECT），服务端可据此返回更合适的资源。结合缓存键与变换策略，可显著降低字节与提升渲染性能。核心内容响应头与接受头Accept-CH: DPR, Viewport-Width, ECT

Vary: DPR, Viewport-Width, ECT

服务器按 Hint 选择资源（示意）import express from 'express';

const app = express();

app.get('/img/hero', (req, res) => {

const dpr = Number(req.headers['dpr'] || 1);

const vw = Number(req.headers['viewport-width'] || 1280);

const ect = String(req.headers['ect'] || '4g');

const width = vw >= 1280 ? 1280 : vw >= 640 ? 640 : 320;

const fmt = ect === '2g' ? 'webp' : 'avif';

// 返回对应图片（略）

res.setHeader('Content-Type', `image/${fmt}`);

res.setHeader('Vary', 'DPR, Viewport-Width, ECT');

res.end(/* image bytes */);

});

技术验证参数在真实站点（Chrome 128/Edge 130 + CDN）：图片字节减少：30–65%LCP 改善：10–25%缓存命中率（Vary 键）：≥ 70%应用场景图片与视频资源的自适应分发移动端与弱网适配最佳实践配置 Accept-CH 与 Vary，确保缓存键一致与正确变更与 Image CDN 变换配合，控制格式与质量结合 Priority Hints 与 Early Hints，形成资源协同策略