如何用navigator.connection.effectiveType检测网络

本文深入解析了如何安全、可靠地利用 `navigator.connection.effectiveType` 动态感知用户真实网络体验——它不是简单的物理连接类型（如Wi-Fi或4G），而是浏览器基于带宽、延迟等综合指标估算出的“等效网络质量”，可能返回 `slow-2g`、`3g`、`4g`、`wifi` 等值，甚至常见却常被误读的 `'unknown'`；文章不仅给出健壮的双重检测写法（先判 `navigator.connection` 存在，再验 `effectiveType` 为字符串），还强调必须监听 `change` 事件以响应网络切换，并明确指出 `'unknown'` 应按最保守策略处理（如禁用高清资源、保持省流模式），避免因错误 fallback 导致弱网用户首屏崩溃——掌握这些细节，才能让前端真正“懂网”、智能降级、提升全网段用户体验。

navigator.connection.effectiveType 不能直接在 HTML 中“用”，它必须通过 JavaScript 访问；HTML 本身没有能力执行运行时网络判断。

先检查 API 是否可用，再读 effectiveType

浏览器支持度不一（Safari 全系不支持，部分 Android WebView 也不支持），硬读会报 Cannot read property 'effectiveType' of undefined。必须做两层检测：

• if ('connection' in navigator) —— 确认存在 connection 对象
• typeof navigator.connection.effectiveType === 'string' —— 防止返回 undefined 或 null

错误写法：navigator.connection.effectiveType || 'unknown'（未判空就访问属性）；正确写法示例：

const effectiveType = ('connection' in navigator && 
  typeof navigator.connection.effectiveType === 'string') 
  ? navigator.connection.effectiveType 
  : 'unknown';

effectiveType 的值不是物理制式，别和 type 混用

effectiveType 返回的是“等效体验类型”，不是运营商上报的真实制式。比如连着 Wi-Fi 但信号极差、DNS 延迟高，也可能返回 '3g'；而 5G 弱信号下可能回落为 '4g' 或 '3g'。它和 connection.type（如 'wifi'、'cellular'）是两个字段：

• connection.type 只反映接口类型（有无 SIM 卡、是否走无线网卡），无法区分 2G 还是 5G
• effectiveType 才是带宽+延迟综合估算结果，业务应以它为准
• 不要写 if (connection.type === 'cellular' && connection.effectiveType === '4g') —— 多余且误导，'4g' 本身就已隐含高可用性

监听 change 事件比单次取值更实用

用户切到地铁、进电梯、Wi-Fi 断开又连上 4G，网络质量会动态变化。effectiveType 初始值只代表页面加载那一刻的状态，不自动更新。必须显式监听：

if ('connection' in navigator && navigator.connection.addEventListener) {
  navigator.connection.addEventListener('change', () => {
    console.log('effectiveType changed to:', navigator.connection.effectiveType);
    // 在这里触发图片切换、动画降级、预加载开关等
  });
}

注意：该事件不会冒泡，也不能委托；绑定晚了（比如等 React 组件挂载后再加）大概率收不到首次变化。

effectiveType 为 'unknown' 时该怎么处理

这个值很常见——新设备首次访问、隐身模式、旧版 Chrome、或系统网络栈未完成初始化时都可能返回它。它不是错误，而是“无法判断”。此时最稳妥的策略是：

• 不加载高清图（避免慢网用户卡顿）
• 不关闭省流模式（saveData 仍可读，优先尊重用户设置）
• 不跳过关键资源预加载（比如首屏文字、基础 CSS）
• 可结合 navigator.onLine + fetch('/favicon.ico', {method: 'HEAD'}) 做轻量连通性兜底，但别指望它补全 effectiveType

真正容易被忽略的是：很多团队把 'unknown' 当成 '4g' 的 fallback，结果在弱网设备上强行加载 @2x 图片，首屏耗时翻倍。它应该和 'slow-2g' 一样，走保守策略。

今天关于《如何用navigator.connection.effectiveType检测网络》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！