navigator.connection.effectivetype 仅是浏览器基于历史数据估算的粗略网络类型，非实时网速指标；应以 savedata 为最高优先级，辅以 downlink 和 rtt 判断，结合防抖、兜底及手动开关实现可靠切换。
不能只靠 navigator.connection.effectiveType 自动切换高清或省流模式——它只是浏览器对网络质量的粗略分类，不是实时网速仪表盘。直接用 effectiveType === "2g" 就切极简布局，容易在 WiFi 信号弱但带宽尚可时误判，也会在 5G 下因服务器延迟高却仍显示“4g”而跳过降级。
effectiveType 的真实作用和局限
它返回的是 "slow-2g"、"2g"、"3g"、"4g"、"wifi" 这类字符串，是浏览器基于历史 downlink 和 rtt 综合估算出的启发式类型，不是精确测量值。典型问题包括：
- iOS Safari 15.4 之前完全不支持，拿到
undefined - 桌面 Chrome 中
effectiveType常固定为"4g"，不可靠 - 同一 WiFi 环境下，信号格数变化不会触发
effectiveType改变 - 海外 CDN 延迟高、丢包多，但
effectiveType仍报"4g"
真正可用的判断组合
应以 saveData 为最高优先级信号，再结合 downlink 与 rtt 做辅助决策：
-
用户开启省流模式（
navigator.connection.saveData === true）：无条件启用省流布局——跳过高清图、禁用动画、加载轻量接口、用 placeholder 替代视频背景 -
downlink 300：大概率弱网，触发降级逻辑（如图片切 WebP+320px、禁用非关键 JS） -
effectiveType仅作参考：比如effectiveType === "slow-2g"时加强降级力度，但不单独作为开关依据
安全切换布局的关键操作
切换不是改个 class 名字那么简单，要避免 FOUC、资源浪费和二次渲染：
- 用
document.documentElement.classList.toggle("lite-mode", isLite)统一控制 CSS 变量和样式规则，不要遍历 DOM 改style - 图片资源使用
data-src-lqip+loading="lazy"，弱网下暂不赋值src，只留占位图 - CSS 中写
.lite-mode * { animation: none !important; transition: none !important; }彻底禁用动效 - 首次进入页面时立即检查状态，不要等
connection.change事件——用户打开就卡在弱网，没机会触发 change
必须做的兼容性兜底
不处理这些，你的“自动切换”在真实设备上基本失效：
- 先做特性检测：
if (!('connection' in navigator)) { /* fallback 到 navigator.onLine + 加载耗时估算 */ } - 安卓 WebView 中
downlink可能返回0，需加> 0安全判断 - 监听
change事件时加 800ms 防抖，防止频繁重绘 - 提供手动开关按钮，并把当前模式状态透出到 UI（如角落小图标），让用户有掌控感
