navigator.connection.effectiveType必须通过JavaScript访问，不能在HTML中直接使用；需先检测'connection' in navigator且effectiveType为字符串，再读取其值，否则会报错。
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'）是两个字段：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
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' 一样，走保守策略。
