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></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，只是帮你听见这句话的耳道入口。
