navigator.connection.savedata 是只读布尔信号，指示用户是否启用系统级省流模式，需手动响应以节省流量，不可赋值或自动触发省流行为。
不能直接靠 navigator.connection.saveData 自动节省流量——它只是个只读信号，你得自己响应它。
什么是 navigator.connection.saveData？
它是浏览器暴露的一个布尔值，表示用户是否在系统级开启了“节省数据”模式（如 Chrome 的 Data Saver、Android 的 Data Saver、iOS 的 Low Data Mode）。它的值只读，无法被 JS 修改，也不能“触发”省流行为——它只是告诉你“访客可能在意流量”。
常见错误现象：TypeError: Cannot assign to read only property 'saveData'（试图赋值）、或误以为设为 true 就能开启省流。
- 仅支持现代浏览器（Chrome 60+、Firefox 62+、Safari 14.4+、Edge 79+），iOS Safari 需注意早期版本返回
undefined - 值为
true时，不代表网络慢，也不代表用户一定没流量——只是偏好低带宽体验 - 页面加载后该值不会动态变化（除非刷新），需监听
change事件才可捕获后续切换
如何安全读取并响应 saveData 状态？
必须做存在性判断 + 事件监听，否则在不支持环境会报错或返回 undefined。
if ('connection' in navigator && 'saveData' in navigator.connection) {
const shouldSave = navigator.connection.saveData;
if (shouldSave) {
// 启用省流策略
loadLowResImages();
skipAnalytics();
deferNonCriticalScripts();
}
// 监听后续切换（例如用户中途打开/关闭省流模式）
navigator.connection.addEventListener('change', () => {
if (navigator.connection.saveData) {
// 切入省流：卸载高清资源、暂停轮询
} else {
// 退出省流：按需恢复（谨慎，避免突兀重载）
}
});
}
- 不要在
DOMContentLoaded之前读取，navigator.connection可能尚未就绪 - 服务端无法直接获取该字段（它是纯客户端信号），需配合 UA 或自定义 header 才能用于 SSR 决策
- SSR 场景下建议 fallback 到服务端 User-Agent 特征（如含
Mobile+Chrome）做粗略判断
哪些操作真正节省流量？别只改图片尺寸
省流不是“让页面变丑”，而是减少字节数和请求数。关键在资源选择与加载时机：
- 用
srcset+sizes让浏览器自动选低分辨率图，而非 JS 强制替换src - 视频默认不自动播放（
autoplay设为false），且优先提供 WebM（比 MP4 小 20–30%） - 禁用非必要第三方脚本（如全量统计 SDK、社交按钮、广告联盟代码），改用轻量替代或懒加载
- 字体子集化（只加载页面实际用到的字符），避免加载整套
woff2（常达 500KB+） - API 请求启用 gzip/brotli，服务端对
saveData用户额外压缩 JSON（移除空格、缩短字段名）
容易被忽略的兼容性坑
这个 API 表面简单，但真实环境中几个点极易翻车：
- iOS Safari 14.0–14.3 返回
undefined，即使设备已开启 Low Data Mode；14.4+ 才稳定支持saveData - 部分 Android WebView（尤其旧版 Crosswalk 或定制 ROM）完全不暴露
navigator.connection - Chrome DevTools 的 “Network Conditions” 面板里勾选 “Save data” 不会触发
change事件，需手动刷新页面才能生效 - 若页面已用 Service Worker 缓存了高清资源，
saveData切换后仍可能从 cache 返回原图——需在 SW 中检查请求头或 URL 参数做分流
真正起效的省流，靠的是把 saveData 当作一个提示信号，嵌入到资源加载、请求策略、缓存逻辑的每个环节里。漏掉任意一环，比如只缩图却照常发 10 个埋点请求，流量照样哗哗走。
