如何借助 navigator.connection.saveData 为终端访客自动节省手机流量

作者：袖梨 2026-06-15

saveData 是 navigator.connection 提供的只读布尔值，反映用户是否启用系统级“数据节省模式”，它不主动省流，仅作为前端决策信号；需三层防护安全读取，并配合图片降级、视频预加载策略等实现真实流量优化。

saveData 是什么，它真的能省流量吗

navigator.connection.saveData 是一个只读布尔值，由浏览器根据用户是否在系统/浏览器层面开启了“数据节省模式”（如 Chrome 的 Data Saver、Android 的 Data Saver、iOS 的 Low Data Mode）来决定。它不控制任何行为，只是告诉你当前环境是否倾向于省流。

它不能主动开启省流，也不能强制压缩资源；它只是一个信号
值为 true 时，通常意味着用户处于移动网络、资费敏感或信号较弱的场景
并非所有浏览器都支持：Safari 从 iOS 14.5 / macOS 11.3 才开始支持，旧版 Safari 返回 undefined；IE 不支持

所以别指望靠它“自动省流”，它只负责传递意图——你得自己响应。

怎么安全地读取 saveData 并避免报错

直接访问 navigator.connection 可能在部分环境（如某些 WebView、老版安卓浏览器、禁用 Network Information API 的隐私模式）下抛出 TypeError: Cannot read property 'saveData' of undefined。

必须做三层防护：

检查 navigator.connection 是否存在
检查 navigator.connection.saveData 是否为布尔值（有些浏览器返回 undefined 或字符串）
建议加个 fallback：当无法判断时，默认不启用省流策略（保守更安全）

const shouldSaveData = () => {  if (!navigator.connection) return false;  const saveData = navigator.connection.saveData;  return saveData === true;};

不要写成 !!navigator.connection.saveData——这会把 undefined 变成 false，看似没问题，但掩盖了 API 不可用的事实，不利于后续调试。

哪些前端操作值得配合 saveData 做降级

saveData 为 true 时，应优先减少请求体积和请求数量，而不是牺牲核心功能：

图片：用 srcset + sizes 切换低分辨率图，或 fallback 到 webp → jpeg → svg 降级链；避免 JS 动态加载高清图
视频：默认不自动播放，禁用 preload="auto"，改用 preload="metadata"
字体：跳过自定义字体（用系统字体栈），或只加载 font-display: swap + woff2 子集
第三方脚本：延迟加载非关键 SDK（如分析、广告），或完全跳过（需业务侧确认）
动画：关闭 CSS prefers-reduced-motion 之外的富交互（如轮播图自动切换、粒子动效）