必须先检查"connection" in navigator且navigator.connection !== null，再验证type为有效字符串、downlink > 0；saveData才是省流关键依据，type仅反映接口类型而非实际网速。
不能只靠 navigator.connection 判断网络好坏，它返回的很多值在真实场景下不可信，必须加验证、做降级。
怎么安全地读取 navigator.connection 的值
很多浏览器（比如 Safari、旧版 Chrome、部分 Android WebView）会返回一个“空壳”对象：存在但所有属性都是 undefined 或默认值（如 downlink: 0）。直接访问会出错或误导判断。
- 先检查是否存在且非空：
"connection" in navigator && navigator.connection !== null - 再验证关键字段是否“可读”：
typeof navigator.connection.type === "string" && navigator.connection.type !== "unknown" - 对
downlink做容错：Number(navigator.connection.downlink) > 0，避免NaN或0被当作有效带宽 - 别碰
rtt：Chrome 移动版常返回0或固定值（如50），无实际参考意义
navigator.connection.type 的实际含义和常见误判
type 返回的是底层网络接口类型，不是用户感知的“信号强弱”或“网速快慢”。例如：
-
"cellular"可能是满格 5G，也可能是边缘地带的 2G；"wifi"可能连着千兆光猫，也可能只是被限速的机场热点 -
"none"表示设备已断网（此时navigator.onLine通常为false），但反过来navigator.onLine === true不代表type一定有效 -
"other"多见于定制 Android 系统或企业 MDM 环境，无法进一步区分，建议统一视为“未知网络”
为什么 saveData 比 type === "cellular" 更值得信任
省流策略不该只看是不是蜂窝网络。iOS 低数据模式、Android 数据节省程序开启时，navigator.connection.saveData 才是系统级的真实意图信号。
立即学习“前端免费学习笔记（深入）”；
- 必须先检查：
"saveData" in navigator.connection，不能直接访问navigator.connection.saveData - 值为
true时，应立即停用高清图、视频自动播放、非关键 JS bundle 预加载等行为 - 该值不会触发
change事件，无法监听；桌面浏览器基本不支持；部分安卓 WebView 也不同步系统设置 - fallback 方案：当
saveData不可用时，用Number(navigator.connection.downlink) 粗略模拟
真实连通性检测为什么不能只靠 navigator.onLine
navigator.onLine 只读系统网络接口状态（Wi-Fi 是否启用、以太网是否插线），完全不验证 DNS、代理、路由器或后端服务是否可达。拔网线能触发变化，但重启路由器、DNS 故障、防火墙拦截——它一概不知。
- 首次检查应在
online或offline事件触发后才采信，不要依赖初始值 - 真正要确认“能不能调通后端”，得发轻量 HTTP 请求，推荐：
fetch('/favicon.ico', { method: 'HEAD', cache: 'no-store' }) - 务必加
AbortController和 2–3 秒超时，响应码为404也算“可达”（说明请求已发出并收到响应） - 监听事件必须在
DOMContentLoaded时绑定，否则可能错过首次切换；组件卸载时记得removeEventListener
最易被忽略的一点：Network Information API 的多数字段（尤其是 effectiveType 和 downlink）在页面生命周期中可能长期不变，但用户实际网络质量可能因信号波动、基站切换、后台应用抢占而突变——需要结合定时探测 + 用户行为反馈（如资源加载失败率）做动态校准。
