使用 Network Information API 实现自适应内容：以回退为先

Network Information API 通过 navigator.connection 向页面提供当前连接的粗略提示。应用可以用这些提示选择资源策略，但它们是可选的估计值，既不保证吞吐量，也不是用户身份。稳妥的做法是先提供完整的基础体验，进行特性检测，再以可逆方式减少可选资源。

API 提供哪些信息

NetworkInformation 对象可以提供 effectiveType、rtt、downlink、saveData，以及在部分实现中提供 type。effectiveType 会把观测到的条件归类为 slow-2g、2g、3g、4g 等值。rtt 是以毫秒表示的往返时间估计，downlink 是以 Mbps 表示的下行速率估计。saveData 表示用户是否要求减少数据使用。这些是浏览器计算并经过隐私缩减的提示，不是每个时刻的可用带宽测量。

不同浏览器和上下文的支持及精度可能不同。把 navigator.connection 当作可选能力，并在使用前检查对象和每个属性。对象缺失、属性不可用或值异常时，必需内容和控件仍必须可用。

渐进式自适应模式

先定义一个不依赖任何网络提示的基础策略。然后使用少量命名变体，例如 baseline、reduced 和 enhanced，做出有边界的选择：延后非必要视频、选择响应式资源集中已有的图片候选，或推迟可选预取。语义内容和无障碍控件应保持不变。

const connection = navigator.connection;
const slow =
  connection && (connection.saveData || connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g');

const policy = slow ? 'reduced' : 'baseline';
// 应用可逆的资源选择；必需内容仍然加载。

不要把单个提示当作兼容性门槛。4g 并不保证大型传输一定成功，缺少提示也不能证明连接很慢。应根据加载完成、解码失败、取消和输入延迟等真实结果调整策略。

应对连接变化

连接对象可能触发 change 事件。监听时，应调整可选工作，而不是移除已经可用的内容。条件变差时取消或暂停排队的增强工作，条件改善时提供清晰的重试方式。对策略变化做防抖，避免估计值波动导致重复下载。

把自适应限制在当前任务内。用户明确请求高清文档时，应在说明成本或采用渐进加载后仍允许继续。节省数据偏好是有用信号，但它不同于实时网络结果，不应静默覆盖明确的用户选择。

隐私与服务边界

网络提示与其他浏览器信号结合后可能增加指纹信息。优先在当前任务中临时使用它们来选择资源策略。默认不要把原始 rtt、downlink 或 effectiveType 放入账户标识符、长期日志或分析数据。如果服务需要远程偏好，应发送 reduced 这类短期策略选择，说明影响，并避免保留底层浏览器值。

会改变上传或下载内容的自适应需要向用户明确说明。较低图片质量或延后的预取是产品选择，不是收集额外数据的授权。必需请求、权限和账户决策应独立于此 API。

测试与持久回退

分别测试 navigator.connection 缺失、只有部分属性存在、启用 saveData，以及中断传输期间触发 change 事件的情况。验证行为而不是固定数字：必需文本仍可读，键盘控件仍可用，可选工作能恢复且不会形成重试循环。还要测试 API 存在但连接类型为 unknown 的浏览器。

响应式图片、延迟加载、流式背压、有界缓存和取消机制在 API 不可用时仍然有用。记录策略名称和限制，在浏览器或工作负载变化后复查；记录结果，不要记录硬件或网络分类。

Network Information 指纹指南介绍这些字段的隐私影响。Client Hints 指纹指南说明请求可见的提示为何应与页面策略保持一致。

来源

• W3C Network Information API
• MDN: NetworkInformation
• MDN: Network Information API