使用navigator.connection动态调整单页应用静态资源加载并发阈值

在单页应用性能优化过程中，navigator.connection.rtt 是一个常被忽视但极具价值的信号。该属性直接反映当前网络链路的往返延迟，是响应最快速且最实用的网络质量指标之一。与相对笼统的 effectiveType 相比，它提供更细粒度的信息；与波动较大的带宽估算相比，它保持更高的稳定性。因此，利用该属性动态调节静态资源（如 JS、CSS、字体、图片）的并发加载数量，是一种高效的优化策略。

当然，任何方案都有其局限性。该属性并非万能的解决方案，必须配合完善的兜底和降级策略，否则在弱网环境或部分浏览器中，优化效果可能瞬间失效。

rtt 值到并发阈值的映射策略

RTT（往返时间）这一指标不能简单进行线性处理。关键在于根据实际用户体验进行分段建模。这里核心目标并非追求数学上的精确计算，而是避免在高延迟网络下盲目发起大量并发请求，导致连接排队和超时堆积，最终拖垮整个页面性能。

经过实践验证的映射策略如下：

• rtt <= 50ms：此类情况通常出现在本地 Wi-Fi、有线网络或信号极佳的 5G 环境。网络状况良好时，可将并发数设置为 6–8，充分利用浏览器空闲连接槽位，实现资源并行加载，加速页面呈现。
• 50ms < rtt <= 150ms：对应普通 4G 网络或中等质量 Wi-Fi。此时需要适当收敛，将并发数控制在 3–4 之间。该范围能够在吞吐量与请求成功率之间取得良好平衡。
• rtt > 150ms：通常意味着用户处于 2G/3G、高抖动蜂窝网络或卫星链路等极端弱网环境。此时必须强制降级，将并发数限制在 1–2，以防止预加载队列发生雪崩效应，确保关键请求能够成功完成。

有一个重要细节需要注意：如果读取到的 rtt === 0 或 undefined，通常表示该属性不可用。此时代码必须能够优雅回退到 navigator.connection.effectiveType 或一个安全的默认值（例如 3）。

在资源加载器中读取并应用 rtt

实现过程中，切忌在每次发起 fetch() 请求前临时读取 rtt。正确的做法是在应用或资源加载器初始化时，建立一个响应式的并发控制器，并监听 connection.change 事件以动态更新并发阈值。

const connection = navigator.connection;
let concurrency = 4;

if (connection && 'rtt' in connection) {
  const rtt = connection.rtt || 0;
  if (rtt <= 50) concurrency = 7;
  else if (rtt <= 150) concurrency = 4;
  else concurrency = 2;
}

// 监听变化（Chrome/Firefox 支持，Safari 不支持 change 事件）
connection?.addEventListener('change', () => {
  const rtt = connection.rtt || 0;
  if (rtt <= 50) concurrency = 7;
  else if (rtt <= 150) concurrency = 4;
  else concurrency = 2;
});

上述代码中的 concurrency 变量应传递给你的资源加载队列管理器（例如一个基于 Promise.allSettled 并实现限流功能的封装层），而非硬编码到具体的 fetch 调用中。这样的设计能够实现策略与实现的解耦，更便于后续维护。

为何不能仅依赖 rtt？必须实施兜底策略

尽管 rtt 效果良好，但将其作为唯一的判断标准存在风险。以下场景中，该属性可能失效甚至产生误导：

• Safari 完全不支持：在 Safari 浏览器中，navigator.connection 对象不包含 rtt 属性，通常仅有 effectiveType 和 downlink。
• 部分 Android WebView 上报异常：某些定制化的 Android WebView 中，rtt 可能被恒定为 0，无法用于区分真实网络质量。
• 信号冲突情况：即使 rtt 报告看似正常的 120ms，但如果同时 effectiveType === 'slow-2g'，仍应遵循弱网策略。这可能是运营商上报了错误的 RTT 值。

因此，一个健壮的实现逻辑应为：优先使用 rtt 进行分段决策 → 若 rtt 不可用或值异常，则回退到 effectiveType 进行判断 → 上述均不可用时，使用固定安全默认值（例如 3）。切勿让单一字段独立决定全部行为。

实际上，真正的难点并不在于读取 rtt 值，而在于如何将这套并发控制机制无缝嵌入到现有资源加载流程中。无论是 Webpack 的 import()、Vite 的 dynamic import，还是自研的 CSS、Font 加载器，这些场景通常没有现成的并发钩子供直接使用，需要手动添加节流控制层。只要遗漏其中一环，整个动态调整策略便形同虚设，这是实践中需要特别留意的问题。