navigator.connection.type 返回值包括 bluetooth、cellular、ethernet、wifi、wimax、none、unknown，其中 cellular 仅表示蜂窝网络，不区分 4G/5G；真正可代表 4G/5G 场景的是 effectiveType 的 "4g"（涵盖 LTE/5G SA/NSA 高带宽情形），但非制式声明而是基于 RTT 与吞吐量的估算。
navigator.connection.type 返回值有哪些，哪些能代表 4G/5G？
navigator.connection.type 是 Network Information API 的一部分，但它的实际可用性远不如宣传中稳定。目前主流浏览器仅在 HTTPS 环境下支持该 API，且返回值非常有限："bluetooth"、"cellular"、"ethernet"、"wifi"、"wimax"、"none"、"unknown" —— 注意：它从不返回 "4g" 或 "5g"。
也就是说，你无法靠 type 字段直接区分 4G 和 5G。真正有意义的是 navigator.connection.effectiveType，它返回 "slow-2g"、"2g"、"3g"、"4g"（注意：这个 "4g" 实际涵盖 LTE/4G/5G SA/NSA 的“高有效带宽”场景）。
- Chrome 61+、Edge 79+ 支持
effectiveType，Firefox 和 Safari 完全不支持 -
effectiveType === "4g"是目前最接近“可安全加载高清图”的信号，但它不是网络制式声明，而是基于 RTT + 下载吞吐量的启发式估算 - 即使用户连着 5G 基站，若信号弱或拥塞，
effectiveType也可能回落为"3g"
如何安全地 fallback 到 navigator.onLine 或 UA 检测？
不能只依赖 navigator.connection，因为：
- API 在 Safari / Firefox 中不可用 →
undefined或抛错 - 部分 Android WebView 禁用该 API（尤其国内定制 ROM）
-
navigator.onLine只反映是否连上网络，不反映质量；true可能只是弱 WiFi 或满格但丢包严重的 4G
推荐组合策略：
- 优先读取
navigator.connection?.effectiveType，若为"4g"，启用高清图 - 若 API 不可用，检查
navigator.onLine为true且navigator.userAgent包含"Mobile"（排除桌面误判），再结合屏幕像素比（window.devicePixelRatio >= 2）作为轻量级代理指标 - 避免用 UA 字符串匹配
"LTE"或"5G"—— 它们在绝大多数手机 UA 中根本不会出现
如何动态切换 img src 并避免重绘抖动？
不要等图片加载完才替换 src，否则会触发空白 → 高清图闪入。正确做法是预加载 + 占位 + 替换：
- 初始
<img>使用低清占位图（如 320w × 240h），并设loading="lazy" - 检测到
effectiveType === "4g"后，创建new Image()预加载高清地址（如https://i.example.com/photo@2x.jpg） - 监听其
onload，再把原<img>的src替换为高清 URL，并同步更新srcset（如srcset="photo.jpg 1x, photo@2x.jpg 2x"） - 务必加
width和height属性，防止布局偏移（layout shift）
示例关键逻辑：
if (navigator.connection?.effectiveType === '4g') {
const highRes = img.src.replace(/\.([a-z]{3,4})$/, '@2x.$1');
const preload = new Image();
preload.onload = () => { img.src = highRes; };
preload.src = highRes;
}
为什么不能只靠 effectiveType 做决策？
effectiveType 是浏览器根据历史网络数据估算的“有效连接类型”，不是实时测量值。它有明显延迟和滞后性：
- 首次访问页面时，
effectiveType默认为"4g"（Chrome 行为），直到收集到足够样本才修正 - 用户从地铁进入商场，WiFi 接入瞬间仍可能维持
"4g"几秒，导致错误加载高清图 - 某些运营商在 5G NSA 组网下，核心网仍是 4G EPC，
effectiveType无法感知物理层升级
更鲁棒的做法是：以 effectiveType 为初始信号，再叠加 fetch() 小资源（如 1KB JSON）实测首字节时间（TTFB）
