网络信息 API 演示 - 带宽类型与 RTT 查询

Network Information API 是一个浏览器提供的Web API，通过 navigator.connection 对象暴露网络连接信息。它允许网页了解用户当前的网络状况，包括连接类型（WiFi/蜂窝/以太网）、估计的带宽（downlink）、往返时间（RTT）以及有效连接类型（effectiveType）等。这使得开发者可以根据网络质量动态调整资源加载策略，提升用户体验。

effectiveType 是浏览器根据实测的RTT和downlink值综合计算得出的网络类别标识。其对应关系大致如下：

• slow-2g：RTT ≥ 2000ms，downlink ≤ 50 Kbps
• 2g：RTT ≥ 1400ms，downlink ≤ 70 Kbps
• 3g：RTT ≥ 270ms，downlink ≤ 700 Kbps
• 4g：不满足以上慢速条件，即RTT较低且带宽充足

该值反映的是端到端的实际网络体验，而非物理连接类型（如显示4G不代表连接的是4G基站）。

RTT（Round-Trip Time，往返时间）是指一个数据包从客户端发送到服务器，再从服务器返回客户端所需的总时间，通常以毫秒（ms）为单位。

RTT直接影响：

• 网页加载速度：高RTT意味着每个资源请求都需要更长时间，HTTP/1.1下尤为明显
• 实时通信质量：视频通话、在线游戏对RTT极为敏感，RTT >150ms时体验开始下降
• TCP握手效率：TLS/SSL握手需要多次往返，高RTT会显著增加连接建立时间

一般RTT <50ms为优秀，50-150ms为良好，150-300ms为可用，>300ms体验明显下降。

目前该API主要在基于Chromium内核的浏览器中得到支持：

• ✅ Google Chrome（桌面版和Android版）
• ✅ Microsoft Edge
• ✅ Opera / Opera Mobile
• ✅ Brave Browser
• ✅ Samsung Internet
• ❌ Mozilla Firefox（暂不支持，可关注 Bug 960426）
• ❌ Safari / iOS Safari（暂不支持）

建议使用前进行特性检测：if ('connection' in navigator) { ... }

可以通过监听 navigator.connection 的 change 事件来实时响应网络变化：

const connection = navigator.connection;
connection.addEventListener('change', () => {
    console.log('网络状态变化:', {
        effectiveType: connection.effectiveType,
        rtt: connection.rtt,
        downlink: connection.downlink
    });
});

当用户从WiFi切换到蜂窝数据（或反之）时，该事件会被触发。结合在线/离线事件（window.addEventListener('online'/'offline')）可实现完整的网络状态监控。

出现这种情况的常见原因：

• HTTP协议限制：在非HTTPS页面下，出于隐私保护考虑，浏览器可能将RTT和downlink值设为零或降低精度
• 浏览器不支持：Firefox、Safari等不支持该API的浏览器中，navigator.connection为undefined
• 初始加载状态：页面刚加载时，浏览器可能尚未完成网络测量，短暂显示默认值
• 隐私设置：某些浏览器的严格隐私模式可能限制这些信息的暴露

建议始终检查值的有效性，并做好fallback处理。

saveData 是一个布尔值，当用户在浏览器或操作系统中启用了"省流量模式"（如Chrome的Lite模式、Android的数据节省程序）时返回 true。

开发者可以利用此标识：

• 自动加载低分辨率图片
• 延迟加载非关键资源
• 减少不必要的网络请求
• 提供简化的页面体验

这有助于在用户主动选择节省流量时提供更友好的体验，避免消耗过多移动数据。

以下是一些实用的优化策略：

• 自适应图片质量：在slow-2g/2g网络下提供低分辨率WebP图片
• 条件性预加载：仅在4g网络下预加载下一页资源
• 视频流自适应：根据effectiveType动态调整视频清晰度
• 减少并发请求：在慢速网络下降低同时发起的请求数量
• 缓存策略调整：慢速网络下更积极地使用本地缓存

结合Service Worker和自适应加载策略，可大幅提升各网络条件下的用户体验。