如何通过 navigator.connection 获取网络类型并为 4G/5G 用户提供高清大图-js教程-PHP中文网

navigator.connection.type 返回值包括 bluetooth、cellular、ethernet、wifi、wimax、none、unknown，其中 cellular 仅表示蜂窝网络，不区分 4g/5g；真正可代表 4g/5g 场景的是 effectivetype 的 "4g"（涵盖 lte/5g sa/nsa 高带宽情形），但非制式声明而是基于 rtt 与吞吐量的估算。

如何通过 navigator.connection 获取网络类型并为 4g/5g 用户提供高清大图

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;
}