视频预加载无固定顺序，由浏览器依重要性、可视状态自主决策；关键在分层控制：首屏优先、可视区激活、用户触发再加载。preload仅是提示，none/metadata/auto三值效果迥异，metadata为多数场景推荐；intersectionobserver精准控制加载时机，配合loading="lazy"兜底；服务端需faststart与accept-ranges支持，首屏主视频可用link preload优化。
视频预加载没有“顺序”可言，它不是按列表排队加载的机制，而是由浏览器根据资源重要性、可视状态和策略建议自主决策的过程。真正可控的是“何时加载哪段内容”，关键在于分层控制：首屏优先、可视区激活、用户触发再加载完整数据。
明确 preload 的作用边界
preload 属性只是提示，不是指令。它的三个取值实际效果差异明显：
- preload="none"：最保守策略，不主动请求任何数据（但部分浏览器仍会取首帧用于 poster 渲染）
- preload="metadata"：只拉取 moov box（时长、宽高、编码格式等），依赖服务端支持 Range 请求；这是多数场景的默认推荐
- preload="auto"：在桌面 Chrome 中可能触发部分缓冲，在 iOS Safari 中恒等于 none，移动端基本无效
用 IntersectionObserver 控制“谁该开始加载”
滚动列表中，真正决定加载时机的是元素是否进入可视区域，而非 HTML 里写的先后顺序：
- 监听 video 元素是否进入视口（可设 rootMargin 提前 1–2 个视口触发）
- 进入时设 preload="metadata"，让浏览器获取封面和时长，同时显示 poster 占位图
- 完全移出可视区且不再临近滚动方向时，设 preload="none" 并清空 src，释放内存和连接
- 用户点击播放时，再设 preload="auto" 或显式调用
load()启动完整加载
配合 loading="lazy" 做兼容兜底
原生懒加载属性能减少初始资源竞争，但需注意适用条件：
- Chrome 77+、Safari 15.4+ 支持
loading="lazy"for<video></video> - 首屏前 1–3 个视频建议不加 lazy，但依然用
preload="metadata"准备元信息 - 旧版浏览器需降级为 JS 实现（IntersectionObserver + 动态赋值 src）
- 避免同时设
loading="lazy"和preload="auto"，逻辑冲突易导致重复请求
比 preload 更底层的优化手段
若目标是缩短首帧时间，单靠 preload 不够，还需服务端与构建层配合：
- 确保 MP4 文件启用 faststart（moov box 移至文件开头），可用 ffmpeg 修复：
ffmpeg -i in.mp4 -c copy -movflags +faststart out.mp4 - 响应头必须含
Accept-Ranges: bytes，否则 metadata 模式会下载整个文件才能解析 - 对首页主视频，用
<link rel="preload" as="video" href="hero.mp4">主动发起请求（仅同域有效） - JS 中提前创建 Video 实例并调用
load()，比纯 HTML 属性更可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
