可通过 navigator.connection.saveData 检测省流量模式，在 document.readyState === 'interactive' 前内联脚本读取并为 <html> 添加 save-data class，结合 CSS 降级样式、JS 资源拦截与用户可逆开关实现轻量加载。
可以通过 navigator.connection.saveData 检测用户是否启用了“省流量模式”，并在页面加载时自动切换为轻量、极简的布局，从而减少图片、动画、第三方脚本和冗余 DOM 的加载。关键在于尽早读取该属性，并在渲染前完成布局决策。
判断时机：页面加载早期读取，避免重排重绘
navigator.connection.saveData 是一个只读布尔值，反映浏览器当前是否处于数据节省模式（如 Chrome 的“Lite mode”、Android 系统级省流开关）。它在 document.readyState === 'interactive' 甚至更早（如 DOMContentLoaded 前）就可安全访问——推荐放在内联 <script> 中，紧贴 <head> 后或使用 defer。
- 不要等到
load事件，此时图片/字体/脚本可能已下载 - 避免在 React/Vue 组件
mounted或useEffect中才判断，布局切换会触发二次渲染 - 示例：在 HTML
<head>中插入一段内联脚本，根据结果动态添加class="save-data"到<html>标签
布局切换：用 CSS 优先实现无 JS 回退的极简样式
将“极简版”定义为一套独立 CSS 规则，通过 html.save-data 选择器控制。这样即使 JS 执行失败或被禁用，样式仍可生效。
- 隐藏非核心元素：
html.save-data .hero-banner, html.save-data .video-bg { display: none; } - 降级图片：
html.save-data img { content: url("/img/placeholder-1px.png"); }，或配合srcset和media属性跳过高清图 - 禁用动画与过渡：
html.save-data * { animation: none !important; transition: none !important; } - 字体精简：
html.save-data { font-family: system-ui, sans-serif; }，跳过自定义 Web Font 加载
资源加载控制：按需拦截非必要请求
仅靠 CSS 隐藏不够，需阻止资源实际发起请求。可在 JS 中结合 saveData 做主动干预：
- 延迟或跳过懒加载图片：
if (navigator.connection.saveData) { img.loading = "eager"; img.src = img.dataset["lowres"] || img.src; } - 不加载统计脚本：
if (!navigator.connection.saveData) { loadAnalytics(); } - 替换 API 请求地址为轻量接口：
fetch(navigator.connection.saveData ? "/api/light" : "/api/full") - 跳过 WebP/AVIF 图片格式协商，强制用 JPEG 或 SVG
用户体验补全：提供手动开关与状态提示
自动切换应透明且可逆。检测到 saveData 为 true 时，在页脚或设置中显示一行小字提示（如“已启用省流模式”），并附带“关闭省流”按钮——点击后移除 save-data class 并恢复资源加载逻辑（注意：无法真正关闭系统级省流，但可覆盖其前端表现）。
- 按钮逻辑不修改系统设置，仅本地覆盖 UI 行为，符合用户预期
- 用
localStorage记录用户手动选择，下次访问优先尊重其偏好而非saveData - 对屏幕阅读器友好：添加
aria-live区域播报切换状态
