preload 是浏览器加载提示而非开关，其实际行为受环境、ua策略及dom状态影响；需结合事件监听与网络面板验证加载时机与程度。

preload 不是开关，是提示——浏览器听不听、听多少，它说了不算。

preload="none" 为什么音频点一下才开始加载？

写了 preload="none"，确实会抑制初始加载，但 Chrome 等浏览器仍可能在用户首次点击 play() 时悄悄预取前几 KB（尤其小文件），以缩短播放响应延迟。这不是 bug，是 UA 的优化策略。

• 它不阻止后续加载，只推迟到“有明确播放意图”时才发起请求
• 若音频体积小（如提示音 MP3 preload 值
• src 是 JS 动态赋值的，preload 完全不生效——必须先挂载 DOM，再设 src

preload="metadata" 是最稳的选择吗？

是的，尤其对需要显示进度条、时长、封面的控件场景。preload="metadata" 只拉取头信息（时长、采样率、是否含封面等），不下载音频帧数据，省流量、兼容性好、UI 可用性强。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 即使设置了 controls，浏览器也倾向优先走 metadata 加载路径，哪怕你写了 preload="auto"
• iOS Safari 无视 preload="auto"，实际行为恒等于 metadata，所以写 metadata 更诚实
• 监听 loadedmetadata 事件才是确认元信息就绪的唯一可靠方式，别依赖 readyState 或网络面板里没看到请求就断定失败

preload="auto" 在哪些情况下根本不起作用？

写了 preload="auto" 却没发请求，大概率不是代码错了，而是环境压制了它：

• 页面刚打开、tab 未激活、或无用户交互焦点（Chrome/Edge 默认延迟加载）
• 设备开启 Low Power Mode（iOS）或 Data Saver（Android Chrome），自动降级为 metadata
• 服务端响应头缺失 Content-Length 或返回 Accept-Ranges: none，浏览器放弃分段预取
• audio 元素还在 DocumentFragment 里没插入 DOM，或 display: none 但父容器 visibility: hidden

真要预加载，光写 preload 属性远远不够

强依赖快速就绪的场景（比如游戏音效、通知提示音），必须组合干预：

• 确保 audio 已插入 DOM（display: none 可以，但不能是未挂载状态）
• 手动设置 preload="none" → 赋值 src → 立即调用 load() → 监听 canplaythrough
• 配合 <link rel="preload" as="audio" href="xxx.mp3"> 提前声明资源优先级，比 preload 属性更底层、更可控
• 动态改 preload 值（比如从 none 改成 auto）不会触发重加载，必须重设 src 或显式调用 load()

真正难的不是写对属性值，而是判断当前环境是否允许加载、何时加载、加载了多少——这些都得靠事件监听和网络面板交叉验证，不能只信 HTML 里的那行字。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！