不能靠 navigator.connection.effectiveType 自动异步切换模式，需手动轮询+监听变化+防抖+兜底；必须兼容检测、首屏同步判断、组合 saveData/downlink/rtt 多维评估，统一控制资源加载与样式降级。
不能靠 navigator.connection.effectiveType 自动异步切换模式——它本身不触发异步行为，也不自带状态监听机制。所谓“异步切换”，本质是开发者主动轮询或监听变化后，再执行样式、资源、逻辑的降级或升级，整个过程需手动控制时机、防抖和兜底。
先做兼容性检测与初始判断
API 不可用时直接跳过，不能假设所有环境都支持：
- 检查
'connection' in navigator且navigator.connection?.effectiveType是字符串 - 不支持时，用
navigator.onLine+ 历史加载耗时（如首屏图片 onload 耗时 > 3s）粗略估算 - 首次进入页面必须同步读取一次，不能等
change事件才初始化，否则弱网用户首屏就卡住
监听变化要搭配轮询，不能只靠 change 事件
connection.change 触发条件苛刻，仅在 effectiveType 或 downlink 发生显著跃变时才触发，无法捕获渐进式劣化（比如从 4.2 → 3.6 → 2.9 Mbps）。真实场景中必须组合使用：
- 注册
connection.addEventListener('change', handler)作为主通道 - 额外启动定时器（每 3–5 秒）轮询
navigator.connection.effectiveType和downlink - 对连续两次采样结果做比对，稳定落在同一档位再触发切换，避免毛刺干扰
切换动作要收敛、可控、无抖动
不是简单改 class 或替换 src，而是统一入口、批量控制、规避 FOUC：
- 用
document.documentElement.classList.toggle('net-4g', isHighBandwidth)控制根节点类名，CSS 中通过.net-4g img { max-width: 100%; }等方式分级响应 - 图片资源用
data-src-hd+loading="lazy"，弱网下不赋值src，只留 LQIP 占位图 - 禁用过渡动画：CSS 中写
.net-slow-2g * { animation: none !important; transition: none !important; } - 若用 Vue/React，把判断逻辑收在根组件 effect 内，子组件只响应状态，不重复探测
别单独依赖 effectiveType，要结合 saveData 和 downlink
effectiveType === '4g' 可信度高，但 '2g' 或 'slow-2g' 易误判（比如 WiFi 信号弱但 downlink 仍报 4g）。更稳妥的做法是组合判断：
- 用户开启「省流模式」（
saveData === true）→ 无条件启用轻量模式 -
downlink 300→ 触发降级，比单看 effectiveType 更准 -
effectiveType仅作辅助参考，不单独用于开关决策
