如何利用 navigator.connection.saveData 为终端访客自动节省手机流量开销

navigator.connection.saveData 仅是用户省流意愿的只读信号，无法自动省流量；需主动响应做资源降级，如图片降质、跳过字体/第三方脚本等。

能用，但不能只靠 navigator.connection.saveData 自动省流量——它只是个信号，真正省流量得靠你主动响应这个信号做资源降级。

为什么 navigator.connection.saveData 不能“自动”省流量

这个属性只是浏览器暴露的一个只读布尔值，告诉你用户是否在系统/浏览器层面启用了“节省数据”模式（比如 Chrome 的 Data Saver、Android 的 Data Saver、iOS 的 Low Data Mode）。它本身不拦截请求、不压缩图片、不跳过脚本——它只回答一个问题：“用户明确表达了想省流量”，其余全靠你写逻辑。

常见错误现象：
• 页面照常加载高清图、WebFont、第三方统计脚本，navigator.connection.saveData 却是 true；
• 开发者误以为设了 saveData: true 就万事大吉，结果实际流量没变化。

• 它不是开关，是 flag —— 你需要监听并分支处理
• 兼容性有限：Safari 直到 iOS 16.4 / macOS 13.3 才支持，旧版返回 undefined
• 部分安卓定制 ROM 或国产浏览器可能不透出该值，或始终返回 false

怎么安全地检测并响应 saveData 状态

别直接读 navigator.connection?.saveData 后就开干。先检查环境是否支持，再结合实际场景做降级决策。

• 必须加空值判断：navigator.connection 可能不存在（如某些 WebView），saveData 可能为 undefined
• 推荐写法：

  const shouldSaveData = navigator.connection?.saveData === true;

• 不要仅依赖它做核心功能降级（比如禁用登录），它只是辅助提示；但适合做非关键体验优化（如图→占位图、视频→静态封面、JSON API 加 ?prefer=light）
• 可配合 navigator.onLine 做组合判断，比如离线 + saveData → 强制本地缓存 fallback

哪些资源最值得按 saveData 动态切换

优先处理体积大、非首屏必需、有替代方案的资源。目标不是“砍功能”，而是“换更轻的实现”。

• 图片：用 <picture> + media="(prefers-reduced-data: reduce)"（CSS 媒体查询，iOS 16.4+ 支持），或 JS 中根据 shouldSaveData 切换 src 为 WebP → JPEG → SVG 占位符
• 字体：跳过 @font-face 加载，改用系统字体栈；或只加载常规字重，跳过粗体/斜体
• 视频/音频：默认不自动播放，封面图用 poster；shouldSaveData 为真时，隐藏播放控件或替换为 GIF 预览
• 第三方脚本：延迟加载分析工具（如 GA4、神策）、广告 SDK；shouldSaveData 为真时直接跳过 document.createElement("script")

容易被忽略的细节和性能陷阱

这个 API 看似简单，但几个点一错，省流效果归零甚至引发白屏：

• navigator.connection 是动态对象，其属性（包括 saveData）**可能随系统设置实时变化**，但浏览器不会触发事件通知——你得自己轮询（不推荐）或监听 change 事件（仅 Chromium 支持 navigator.connection.addEventListener("change", ...)）
• 服务端也能感知：HTTP 请求头带 Save-Data: on（Chrome/Edge Android），后端可据此返回精简 JSON 或跳过埋点字段，比前端 JS 更早拦截
• 别在 SSR 中读 navigator.connection —— Node.js 环境没有这个对象，会报错；需在客户端 hydration 后再判断
• 开启 saveData 的用户往往网络弱，JS 执行慢，所以降级逻辑要轻量：避免复杂计算、不用大型 polyfill、CSS 降级尽量用原生 media query

真正起效的省流，从来不是靠一个布尔值，而是靠你在图片加载前、脚本插入前、API 发起前，多问一句：“ta 此刻需要这个吗？” —— 而 navigator.connection.saveData，只是帮你听见这句话的耳道入口。