可通过 navigator.connection 动态调控高清资源并发量：基于 downlink 值分级设限（

可以通过 navigator.connection 获取用户当前网络类型、有效带宽（downlink）和连接稳定性（effectiveType），结合其变化事件，动态控制图片/视频等高清资源的并发请求数量，从而平衡加载速度与用户体验。

监听网络状态变化并初始化策略

在应用启动时读取初始网络信息，并监听 connectionchange 事件，避免仅依赖首次判断：

• 使用 navigator.connection?.effectiveType 判断大致网络类型（slow-2g、2g、3g、4g、5g）
• 优先参考 navigator.connection?.downlink（单位 Mbps），它比 effectiveType 更连续、更灵敏，适合做分级阈值控制
• 为避免频繁抖动，可对 downlink 做简单平滑（如取最近 3 次值的中位数）或添加最小更新间隔（如 3s）

定义并发量分级映射规则

根据网络能力设定不同并发上限，不追求线性匹配，而强调体验断点：

• downlink → 并发 1（仅加载占位图或极低清图）
• 0.5 ≤ downlink → 并发 2～3（适配 3G 或弱 Wi-Fi）
• 2 ≤ downlink → 并发 4～6（主流 Wi-Fi / 4G）
• downlink ≥ 8 → 并发 8～12（高速 Wi-Fi / 5G，可叠加懒加载+预加载）
• 若 navigator.connection 不可用（如旧浏览器、部分桌面 Safari），默认回退到中等并发（如 4）并关闭自适应逻辑

在资源加载器中集成并发控制

不直接修改全局 fetch，而是封装一个受控的高清资源加载器：

• 维护一个基于当前网络策略的「许可令牌池」，例如用 Promise 队列 + acquire/release 模式控制同时发起的请求数
• 对每张高清图调用 loadHighResImage(src, { priority: 'high' })，内部自动排队、降级（如将 @2x 替换为 @1x）或跳过
• 滚动进入视口的图片，可按需提升其请求优先级，但仍在当前并发上限内调度
• 关键路径资源（如首屏 Hero 图）可临时豁免并发限制，但需标记并记录，便于后续分析影响

补充体验优化细节

单纯限并发不够，需配合其他手段让降级“无感”：

• 始终先加载低质量占位图（LQIP 或色块），再用高清图覆盖，避免白屏或布局跳动
• 对 effectiveType === 'slow-2g' 的场景，主动禁用 loading="lazy"，改用更保守的预判加载（如只加载首屏+1屏）
• 记录每次并发调整的日志（如 network: 4g → downlink: 3.2 → concurrency: 6），用于灰度验证和 A/B 测试
• 服务端配合：通过请求头（如 X-Downlink: 2.4）透传客户端网络能力，实现 CDN 动态返回合适分辨率资源