navigator.connection不能自动切换布局，因其仅提供网络信号（如effectiveType、downlink、rtt），需开发者自行编写切换逻辑，并配合降级策略、兼容性兜底与用户感知控制。
navigator.connection 能拿到网络类型、带宽估算和 RTT，但不能直接“自动切换布局”——它只提供信号，切换逻辑必须你自己写，且要配合降级策略、兼容性兜底和用户感知控制。
为什么不能只靠 navigator.connection.effectiveType 判断弱网
effectiveType 是浏览器基于 downlink 和 rtt 算出来的粗略分类（如 "2g"、"slow-2g"），但它不反映瞬时抖动、丢包或服务端延迟。比如：
- WiFi 信号格数少但 downlink 仍报
"4g"，实际加载卡顿 - 5G 网络下服务器在海外，
rtt高达 400ms，但effectiveType还是"4g" - Safari 15.4 之前完全不支持该 API，iOS 用户拿到
undefined
所以仅用 effectiveType === "2g" || effectiveType === "slow-2g" 做开关，误判率高、体验割裂。
navigator.connection 的可用字段与典型阈值
真正可操作的字段只有三个： downlink（Mbps）、rtt（ms）、saveData（布尔值）。建议按如下组合判断：
-
saveData === true：用户明确开启了“省流模式”，应无条件启用简化布局（图片懒加载、禁用非关键动画、压缩 JSON 字段） -
downlink < 1.5且rtt > 300：大概率弱网，触发降级逻辑 -
effectiveType仅作辅助参考，不单独用于决策；它的值在 Chrome/Edge/Firefox 移动端较稳，桌面端不可靠 - 注意：
downlink在部分安卓 WebView 中返回0，需加> 0安全判断
如何安全地触发省流模式布局切换
切换不是简单改 class 或 show/hide 元素，而是要避免 FOUC、布局抖动和资源浪费：
- 用
document.documentElement.classList.toggle("lite-mode", isLite)统一控制 CSS 变量和选择器，不要遍历 DOM 改 style - 图片资源用
data-src-lqip+loading="lazy"，弱网下跳过src赋值，只留占位图 - 禁用所有
transition和@keyframes，CSS 中加.lite-mode * { animation: none !important; transition: none !important; } - 若用 Vue/React，把降级逻辑收敛到根组件的 effect 中，避免子组件重复判断；监听
connection.change时用防抖（如 800ms），防止频繁重绘 - 首次进入页面时，同步检查
navigator.onLine+navigator.connection，但不要等change事件才初始化——用户可能一打开就卡在弱网
必须做的兼容性兜底和验证点
不处理这些，你的“自动切换”在真实设备上大概率失效：
- 先做特性检测：
if (!('connection' in navigator))→ 返回默认保守策略（如始终启用 lite-mode，或 fallback 到 fetch 探测） - fetch 探测作为补充手段：GET 一个
/ping?_t=${Date.now()}，超时设为1500ms，响应 >800ms 且连续两次失败，才标记为弱网 - 真机测试重点看：微信内置浏览器（X5 内核）、QQ 浏览器、iOS Safari 15.4–16.6（partial support）、鸿蒙系统 WebView
- 别忘了检查
prefers-reduced-motion，如果用户系统级关闭动画，lite-mode应自动生效，无需依赖网络判断
最易被忽略的是：网络状态变化时，已加载的图片、视频、第三方 SDK（如埋点、广告）不会自动释放或降级——你得手动 abort 请求、卸载 widget、暂停轮询，否则省流只是“看起来省了”。
