preload="none"不能保证省流量，因ios safari会强制预加载元数据，android chrome在自动播放时仍会下载，且src动态设置过早或误用metadata也会触发请求。
preload="none" 真的能省流量吗？
不能一概而论。preload="none" 只是告诉浏览器“别主动下载音频”，但实际是否省流量，取决于用户行为和浏览器实现。iOS Safari 会忽略该属性，强制预加载元数据（至少请求前几 KB）；Android Chrome 大部分情况下尊重 preload="none"，但若页面有自动播放逻辑（比如 autoplay 或 JS 调用 play()），浏览器仍会触发下载。
为什么设了 none 还在发请求？
常见原因有三个：
- 页面加载时 JS 立即调用
audio.play()—— 浏览器必须加载音频才能播放，preload形同虚设 -
audio元素被插入 DOM 后又立刻设置src，某些浏览器会立即发起请求（哪怕preload="none"） - 使用了
preload="metadata"却误以为等于none——metadata仍会请求文件头（通常 1–50 KB），对小音频反而更费流量
真正减少手机流量的实操组合
单靠 preload="none" 不够，需配合以下动作：
- 移除
autoplay属性，禁用任何自动播放逻辑（包括play()的无用户手势调用） - 延迟设置
src：初始时不要写<audio src="xxx.mp3"></audio>，等用户点击播放按钮后再动态赋值audio.src = "xxx.mp3" - 对长音频考虑分段加载（如 HLS 或 MSE），但普通
<audio></audio>不支持，需换方案 - 服务端开启
Accept-Ranges: bytes和正确Content-Range响应，确保浏览器能做范围请求（避免一次拉全量）
示例：初始 HTML 中不带 src
<audio id="my-audio" preload="none" controls></audio>
点击播放时才加载：
document.getElementById('my-audio').src = '/audio/episode1.mp3';
移动端特别要注意的坑
iOS 上几乎所有 Web Audio 行为都受限制：
- Safari 忽略
preload="none"，一定会发 HEAD 或 GET 请求获取 duration、codec 等元数据 - 即使你没调
play()，只要src已设置且元素在可视区，Safari 可能预缓冲前 1–2 秒 - 微信内置浏览器（X5 内核）对
preload支持混乱，建议统一用「懒加载 + 用户触发」模式
最保险的做法不是依赖 preload，而是彻底延迟 src 设置，直到明确需要播放那一刻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
