preload属性是浏览器加载提示而非强制指令，取值none/metadata/auto分别对应跳过预加载、仅加载元信息、允许自主决策；实际加载受焦点、省电模式、DOM状态、响应头等影响，强依赖场景需结合link[preload]和load()主动控制。
HTML5 多媒体内容的“预判机制”并不存在一个统一命名的内置模块，它实际是浏览器根据多种信号综合决策的一套隐式行为体系。核心不在于开发者写什么指令，而在于如何提供足够清晰、可信、及时的上下文，让浏览器更大概率做出你期望的加载选择。
preload 属性：提示而非命令
preload 是最直接的声明式提示，但它只起建议作用：
- none：适合大文件、低流量场景或用户明确不常播放的内容；注意 iOS Safari 会忽略此值并静默加载首帧
-
metadata：最常用且稳妥的选择；仅拉取容器头（如 MP4 的 moov box），用于显示时长、封面、支持拖拽；前提是服务端返回
Accept-Ranges: bytes -
auto：语义模糊；桌面 Chrome 可能预载前几秒，但 iOS Safari 始终等效于
none，不可依赖
真正影响预加载决策的隐藏信号
浏览器在解析 DOM 和响应用户行为时，会动态评估多个隐性条件：
- 元素是否已挂载到真实 DOM（不在 DocumentFragment 或 display: none 的父容器中）
- 是否设置了
controls属性——有 controls 时，浏览器倾向优先触发 metadata 加载以渲染进度条 - 是否设置了
autoplay——多数桌面浏览器会绕过 preload 值，直接开始加载；iOS 则完全禁止 autoplay，preload 自动失效 - 设备状态：开启低电量模式、节省数据模式时，Chrome/Firefox/Safari 会主动降级为 metadata 或跳过缓冲
- 资源是否跨域且未带
crossorigin属性——可能阻断元数据解析，导致 fallback 行为
主动干预比被动等待更可靠
当业务强依赖快速就绪（如提示音、关键解说视频），需跳出 preload 单点依赖：
立即学习“前端免费学习笔记（深入）”；
- 用
<link rel="preload" as="video" href="xxx.mp4">在 中提前声明，抢占资源发现时机 - 确保视频文件启用
faststart（moov box 移至开头），避免 metadata 模式下因索引位置靠后而被迫下载大量无效数据 - JS 中显式调用
video.load()，并在canplaythrough事件后执行逻辑；注意首次调用才有效，重复调用无反应 - 对高优先级音频，可创建
Audio实例并提前赋值src+load()，即使不插入 DOM 也能完成解码准备
服务端配合是底层基础
再好的前端策略也受限于服务端能力：
- 必须返回
Accept-Ranges: bytes响应头，否则 metadata 模式可能退化为整文件下载 - 避免返回
Content-Encoding: gzip给视频文件——Range 请求与压缩不兼容 - CDN 配置需支持字节范围请求，并缓存 206 响应
- 若使用 HLS/DASH，预加载逻辑由播放器控制，
preload属性基本失效，应改用播放器自身的预缓冲配置
