最稳妥方案是优先用 navigator.connection.effectivetype 粗粒度分级（'slow-2g'/'2g'/'3g'/'4g'），再结合 downlink 带宽值精细调控，实时监听 change 事件动态降级，避免 ssr 使用。
直接用 navigator.connection 的 effectiveType 和 downlink 两个字段做判断最稳妥，rtt 基本不可靠，多数浏览器返回 undefined，不能作为决策依据。
用 effectiveType 做粗粒度分级
这是兼容性最好、语义最明确的字段，Chrome 61+、Edge 79+、Firefox 90+ 都支持。它把网络归为几类：'slow-2g'、'2g'、'3g'、'4g'。适合快速决定是否加载高清资源：
- 'slow-2g' 或 '2g'：跳过所有图片懒加载，只渲染文字和占位灰图；禁用自动播放视频
- '3g'：加载中等尺寸图片（如 800w），关闭 WebP 格式回退到 JPEG
- '4g'：启用高清图（srcSet 中的 2x/3x）、WebP/AVIF、预加载下一页数据
用 downlink 辅助精细控制
downlink 返回估算下行带宽（单位 Mbps），比如 1.5 表示约 12 Mbps。它比 effectiveType 更连续，适合在同类网络里进一步区分：
- 当
effectiveType === '4g'且downlink > 10：可加载 4K 视频片段或高帧率动画 - 当
effectiveType === '4g'但downlink ：说明可能连着弱信号热点，降级为 720p - 当
effectiveType === '3g'且downlink ：按 '2g' 处理，延迟加载非核心接口
监听变化并动态响应
connection.change 事件不是实时触发的，实际延迟可能达数秒，但它足够用于策略降级，比如切换网络后立刻停掉大文件上传：
- 不要只在页面初始化时读一次状态；每个资源加载前（如
img挂载、IntersectionObserver回调）都应重新读取 - 监听 change 后，清空已缓存的高清资源 URL，后续请求走降级路径
- 避免在 SSR 环境中使用 ——
navigator仅客户端存在，服务端访问会报错
配合前端框架落地示例
在 React 或 Vue 组件中，不建议全局监听后存状态，而应在关键节点实时评估：
- 对图片组件：检测到
effectiveType === '2g'，强制将src设为小尺寸版本，忽略srcSet - 对懒加载列表：在
IntersectionObserver进入视口时，先查navigator.connection.effectiveType，是 'slow-2g' 就跳过fetch()，直接渲染骨架屏 - 对视频播放器：初始加载时根据
downlink选择起播清晰度，播放中每 10 秒重读一次，低于阈值则触发清晰度自动下调
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
