preload属性是浏览器加载建议而非开关，其none、metadata、auto三值对应不同网络行为：none几乎不耗带宽，metadata仅拉几KB头信息（需服务端支持Accept-Ranges且MP4经faststart处理），auto不可靠易浪费带宽；应按场景精准选用并辅以JS动态控制。
preload 属性不是开关，而是向浏览器发出的加载建议，它直接影响视频是否下载、下载多少、何时开始——用对了能减少点击等待，用错了会白白消耗带宽、拖慢首屏。优化带宽的核心，是让浏览器只拉真正需要的数据，而不是“全量加载”。
preload 的三个值到底拉什么
不同取值对应完全不同的网络行为，不能只看名字：
-
none：不主动请求视频主体，但部分浏览器（如 Chrome）仍可能发一个极小的 Range 请求（如
bytes=0-1023）来读取宽高和编码格式——几乎不耗带宽，适合列表页大量缩略视频。 -
metadata：只拉视频头信息（moov box），通常几 KB，含时长、尺寸、封面帧、音轨数。前提是服务端返回
Accept-Ranges: bytes，且 MP4 经ffmpeg -c copy -movflags +faststart重写（确保 moov 在开头），否则可能退化为下载前几 MB。 - auto：浏览器可忽略。iOS Safari 恒为 none；Chrome 桌面版在非节电模式下可能缓存前几秒；弱网或开启 “Save-Data” 时直接降级为 metadata。它不保证加载完成，也不节省带宽，反而容易引发并发请求挤占关键资源。
按场景选值，精准控制带宽消耗
别统一设 auto，要根据视频位置和用户意图做区分：
- 首页 Banner 或产品主视频：用
preload="metadata"。封面立刻显示、进度条可拖、用户点播再加载主体，兼顾体验与带宽克制。 - 短视频流/信息列表页：所有视频默认
preload="none"，配合loading="lazy"和IntersectionObserver，仅对即将进入视口的 1–2 个视频动态设preload="metadata"并调用load()。 - 已知高概率播放的单页主视频（如课程页）：仍用
preload="metadata"，并在用户滚动到视口后 JS 主动调用load()，避免初始加载就占用带宽。
比 preload 更关键的带宽控制条件
preload 能否省带宽，依赖底层服务端配置，缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 服务端必须返回
Accept-Ranges: bytes响应头，否则 metadata 模式无法分片请求，可能被迫下载整个文件前几 MB 才能拿到时长。 - MP4 文件必须经
faststart处理，把 moov box 移到开头。未处理的视频，浏览器即使设 metadata，也要下载大段数据才能定位 moov。 - 避免滥用
<link rel="preload" as="video">：它和 video 的 preload 属性不互通，跨域需crossorigin，Safari 完全忽略，Chrome 常降级优先级，还可能导致重复请求。
动态控制比静态属性更可靠
preload 只在 HTML 初始解析阶段生效。JS 动态插入的 <video>，无论怎么设 preload 都不会触发预加载——你得亲手调 load()：
- 监听
IntersectionObserver，元素进入视口时才赋值src并立即调load()。 - 通过
navigator.connection.effectiveType检测网络类型，弱网（如slow-2g）下强制设preload="none"或跳过加载。 - 用户首次访问用
metadata，若 localStorage 记录其已播放 ≥3 次，下次访问可升级为auto（仅限桌面端核心视频）。
