navigator.connection.rtt是network information api提供的网络延迟指标，单位毫秒，用于动态调节spa预下载并发数：≤50ms建议6～8，50～150ms建议3～4，＞150ms建议1～2，并需结合effectivetype兜底及兼容性fallback。
navigator.connection.rtt（往返延迟）是 Network Information API 提供的关键网络质量指标，单位为毫秒（ms），反映设备与服务器之间一次请求-响应的典型延迟。在单页应用（SPA）中，它比带宽更稳定、更易感知，特别适合用作预下载并发数的动态调节依据——高 RTT 意味着网络“反应慢”，盲目增加并发反而加剧队头阻塞和连接竞争；低 RTT 则说明链路响应及时，可安全提升并发以加速资源就绪。
H3 用 rtt 划分网络响应等级，映射合理并发区间
RTT 数值本身不直接决定并发数，需结合实际场景建模。常见经验分段如下（适用于主流 Web 应用）：
rtt ≤ 50ms：优质网络（如本地 Wi-Fi、有线、强信号 5G）
→ 并发数建议：6～8（充分利用空闲连接槽位）50ms ：中等网络（普通 4G、弱 Wi-Fi）
→ 并发数建议：3～4（平衡吞吐与稳定性）rtt > 150ms：弱网或高抖动环境（2G/3G、边缘蜂窝、卫星链路）
→ 并发数建议：1～2（避免连接排队、超时堆积）
注意：该映射非绝对，应配合
effectiveType（如'slow-2g'）做兜底校验。例如即使 rtt=120ms，若effectiveType === 'slow-2g'，仍应按弱网策略执行。
H3 在 Vue/React 中实现 rtt 驱动的并发控制器
以 Vue 3 Composition API 为例，封装一个响应式并发管理器：
// usePreloadConcurrency.ts
import { ref, watch } from 'vue'
const concurrency = ref(4) // 默认并发数
const connection = navigator.connection
// 初始化：读取当前 rtt，设默认值
if (connection && 'rtt' in connection) {
const rtt = connection.rtt || 0
if (rtt {
const rtt = connection.rtt || 0
if (rtt <p>在预加载逻辑中（如路由切换前 preload 资源），用 <code>concurrency.value</code> 控制 Promise.allSettled 的批大小：</p><pre class="brush:php;toolbar:false">async function preloadChunk(chunkUrls: string[]) {
const batchSize = concurrency.value
for (let i = 0; i fetch(url, { cache: 'force-cache' }))
)
}
}H3 结合请求生命周期做平滑降级与恢复
RTT 是估算值，存在波动。直接硬切并发数可能导致资源加载中断或突增。推荐加入“迟滞窗口”和“渐进调整”：
- 迟滞处理：仅当 rtt 连续 2 次变化超过 ±30ms，才触发并发更新
- 渐进调整：从 6→2 不直接跳变，而是按 6→4→2 分两步，在 1s 内完成
- 失败兜底：若某批次预加载失败率 > 30%，立即临时降为 1 并暂停 3s 后重试
示例逻辑片段：
let lastRtt = connection?.rtt || 100
let pendingConcurrencyChange: number | null = null
connection?.addEventListener('change', () => {
const nowRtt = connection.rtt || 0
if (Math.abs(nowRtt - lastRtt) > 30) {
pendingConcurrencyChange = calcConcurrency(nowRtt)
setTimeout(() => {
if (pendingConcurrencyChange !== null) {
concurrency.value = pendingConcurrencyChange
pendingConcurrencyChange = null
}
}, 500)
}
lastRtt = nowRtt
})
H3 注意兼容性与 fallback 策略
- Safari 15.4+ 才完整支持
rtt，旧版 Safari、IE 完全不支持 - Firefox 支持
rtt但部分 Android WebView 不返回有效值 -
必须提供 fallback：检测不到
rtt时，退回到effectiveType分类（如'4g' → 4,'3g' → 2,'2g' → 1），再无依据则固定为 3
function getInitialConcurrency(): number {
if (!connection || typeof connection.rtt !== 'number') {
switch (connection?.effectiveType) {
case '4g': return 4
case '3g': return 2
case '2g': return 1
default: return 3
}
}
return calcConcurrency(connection.rtt)
}
不复杂但容易忽略
