navigator.connection.savedata 是浏览器“节省数据”模式的只读布尔标识，仅反映用户设置而非网络质量，需判空安全读取，适用于前端主动省流优化但不可用于服务端决策或替代网络状态判断。
navigator.connection.saveData 是什么，能信吗
navigator.connection.saveData 是一个只读布尔值，表示用户是否在浏览器中启用了“节省数据”（Data Saver）模式。它属于 NetworkInformation API，目前在 Chrome、Edge、Firefox（需启用 dom.netinfo.enabled）、Samsung Internet 中支持，Safari **不支持**。
这个值不是实时探测网络包，而是读取浏览器自身的设置开关——所以它快、无权限提示、不触发网络请求。但它**不能替代服务端的流量控制逻辑**，仅适合做前端体验降级（比如关闭自动播放、替换高清图、隐藏非关键动画）。
注意：navigator.connection 在部分旧版 Android WebView 或 iOS WKWebView 中可能为 undefined，必须先判空。
如何安全读取 saveData，避免报错
直接访问 navigator.connection.saveData 会因环境缺失抛出 TypeError。必须分层判断：
- 先检查
navigator 是否存在（SSR 场景下可能为 undefined）
- 再检查
navigator.connection 是否存在且非 null
- 最后确认
saveData 属性可读（某些浏览器返回 undefined 而非 false）
function isSaveDataEnabled() {
if (!navigator || !navigator.connection) return false;
return navigator.connection.saveData === true;
}
navigator 是否存在（SSR 场景下可能为 undefined）navigator.connection 是否存在且非 null
saveData 属性可读（某些浏览器返回 undefined 而非 false）别写成 !!navigator.connection.saveData —— 因为未开启时它可能是 undefined，而 !!undefined === false 看似没问题，但语义模糊，且未来若规范允许字符串值（如 "on"）就容易出错。
saveData 开启时该做什么前端优化
它不是“网络差”的等价物，而是明确的用户意愿表达。优化应聚焦“主动省流”，而非“被动降级”：
- 用
loading="lazy" + decoding="async" 控制图片加载节奏，对 isSaveDataEnabled() 为 true 的用户，额外加 fetchpriority="low"
- 禁用
<video autoplay muted></video>，改用显式点击播放
- 跳过 WebP/AVIF 图片格式探测，直接 fallback 到
jpg（编码体积更小、兼容性更好）
- 暂停非必要轮询（如心跳、状态同步），改用 visibilitychange + 节流触发
loading="lazy" + decoding="async" 控制图片加载节奏，对 isSaveDataEnabled() 为 true 的用户，额外加 fetchpriority="low"
<video autoplay muted></video>，改用显式点击播放jpg（编码体积更小、兼容性更好）不要用它来禁用所有 JS 功能或隐藏整个模块——那属于 UX 暴政。它只是个信号，不是判决书。
为什么不能靠它做服务端判断或埋点归因
navigator.connection.saveData 是纯客户端状态，**无法通过 HTTP Header 透传给后端**（除非你手动塞进请求头）。而且：
- 用户可能在页面加载后才开启省流模式，此时前端已渲染完毕，
saveData 值不会触发重绘
- 它不触发事件监听（没有
connectionchange 类似机制），只能首次检测或配合 visibilitychange 定期轮询（不推荐）
- Chrome 会缓存该值直到重启标签页，即使用户中途关闭省流，页面内仍读到
true
saveData 值不会触发重绘connectionchange 类似机制），只能首次检测或配合 visibilitychange 定期轮询（不推荐）true
真正需要服务端适配时，应该用 Save-Data: on 请求头（仅 Chrome/Edge 发送），而不是依赖 JS 读取结果反向传参。
最常被忽略的一点：它和 navigator.onLine 完全无关，也和 effectiveType（如 '2g'）没有必然关联——有人开着省流但连着千兆光纤，也有人关着省流却卡在 3G。别混用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
