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

可通过 navigator.connection.effectivetype 判断网络类型，优先使用 '4g' 值识别高带宽环境并加载高清图；需兼容性检测，不支持时降级处理；推荐用 + srcset 动态切换，避免二次加载，并结合 devicememory、onchange 等优化体验。

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

可以通过 navigator.connection 的 effectiveType 属性判断当前网络类型，并结合图片 srcset 或动态加载逻辑，为 4G/5G 用户提供高清大图，同时避免慢网用户下载过大资源。

检查浏览器是否支持 navigator.connection

并非所有浏览器都支持该 API（如 Safari 一直未实现，部分旧版 Android WebView 也不支持），需先做兼容性判断：

检查 typeof navigator.connection !== 'undefined'
确认 navigator.connection.effectiveType 存在且为字符串
不支持时可降级为 UA 判断或默认加载中等清晰度图片

识别 4G/5G 网络的有效方式

navigator.connection.effectiveType 返回的是“有效网络类型”，不是物理制式，但能反映实际带宽体验。它包含以下值：

4g：代表高带宽、低延迟的网络（通常对应真实 4G/5G）
3g、2g、slow-2g：明确表示弱网
unknown 或未定义：无法判断，建议保守处理（如加载中等图）

注意：effectiveType === '4g' 是目前最可靠的信号，代表可安全提供高清资源；不要依赖 type === 'cellular'，因为它仅表示“蜂窝网络”，无法区分 2G 还是 5G。

动态加载高清图的实用做法

不推荐直接用 JS 替换 <img src>（会触发二次加载），更优方案是：

使用 <picture></picture> + media 和 srcset，配合 JavaScript 检测后添加 data-srcset-hd 并手动切换 srcset
服务端通过请求头（如 Sec-CH-Net-Effective-Type）下发，但需开启 Client Hints（兼容性有限）
前端检测后，用 fetch() 预判图片大小再加载（适合关键首屏图）

示例逻辑：

if (navigator.connection && navigator.connection.effectiveType === '4g') {
  document.querySelectorAll('[data-hd-img]').forEach(img => {
    const hdSrc = img.dataset.hdSrc || img.dataset.srcsetHd;
    if (hdSrc) img.srcset = hdSrc;
  });
}