preload="auto"在弱网下会触发不可控大文件加载，应改用preload="metadata"并配合network.effectivetype检测降级为none，同时确保服务端支持accept-ranges和moov faststart。
preload 怎么避免在弱网下偷偷加载大文件
写了 preload="auto" 却发现 2G 网络下页面卡死、流量告急，不是代码写错了，是浏览器把“允许加载”当成了“必须全量加载”。preload 本身不感知网络质量，它只提建议；真正决定要不要加载、加载多少的，是浏览器根据 navigator.connection.effectiveType 和系统设置做的动态降级。
常见错误现象：preload="auto" 在 Chrome Android 上触发前 5 秒视频下载，但用户用的是“节省流量”模式，结果既没播成，又耗了 3MB 流量；iOS Safari 更干脆，直接无视该值，等同于 none。
- 别在 HTML 模板里硬写
preload="auto"—— 尤其对非首屏、非核心视频 - 用 JS 检测网络类型：
navigator.connection?.effectiveType（支持 Chrome 61+、Firefox 63+、Safari 14.1+）；值为'2g'或'slow-2g'时，强制设preload="none" - 检测到
navigator.permissions?.query返回{state: "prompt"}或低电量模式（navigator.battery?.charging === false），也应主动降级 - 服务端需返回
Accept-Ranges: bytes响应头，否则metadata模式可能退化为下载前几 KB，反而更费流量
怎么让 preload="metadata" 在老旧 Android 上不退化成 none
preload="metadata" 是最省流量也最可控的取值，但它依赖服务端支持 HTTP Range 请求 + 视频文件 moov box 位于开头。Android 4.4 WebView、部分国产浏览器内核会把它当成 none 处理——不是 bug，是它们压根没实现字节范围请求逻辑。
使用场景：短视频列表页、信息流卡片、搜索结果页，需要快速显示封面和时长，但不能接受任何不可控下载。
- 用
ffmpeg -c copy -movflags +faststart xxx.mp4重写视频，确保 moov 在文件头部（否则浏览器得下载整个文件才能拿到元信息） - 服务端 Nginx 配置需含
add_header Accept-Ranges bytes;，Apache 加Header set Accept-Ranges bytes - 兜底检测：监听
loadedmetadata事件超时（如 3s 未触发），则 fallback 到手动设置poster+ 显示“点击播放”提示 - 不要依赖
video.readyState判断是否就绪，它在元数据加载完成前常卡在0（HAVE_NOTHING）
preload 和 loading="lazy" 怎么配合防流量浪费
loading="lazy" 是浏览器原生懒加载开关，preload 是加载策略提示，二者不冲突但有主次：前者控制“什么时候开始请求”，后者控制“请求什么内容”。一起用，才能做到“可视区才拉元数据，用户点播再拉画面帧”。
性能影响：不加 loading="lazy" 的视频列表，在滚动初期就触发几十个 preload="metadata" 请求，HTTP 连接池迅速占满，关键资源（如首屏图片、JS）被阻塞。
- 所有非首屏
<video></video>必须加loading="lazy"（Chrome 77+、Safari 15.4+、Firefox 110+ 支持） - 首屏前 1–3 个视频可不加
loading="lazy"，但依然设preload="metadata"提前准备封面和时长 - 动态插入的视频（如无限滚动加载），即使写了
preload="metadata"，也必须等IntersectionObserver触发后，再调用video.load()才真正发起请求 - 离开可视区后，清空
src并设preload="none"，释放已建立的连接（注意：设空src会中断当前加载）
为什么改了 preload 属性却没重新加载
运行时执行 video.preload = "auto" 或 el.setAttribute("preload", "auto")，几乎从不触发新请求——这不是 bug，是规范明确的行为：preload 只在元素被 HTML 解析器首次处理时生效。后续修改只是更新属性值，浏览器不会回溯重载。
容易踩的坑：用 React/Vue 动态渲染视频组件，模板里写了 preload="metadata"，但组件 mount 后又通过 props 切成 "auto"，结果毫无反应。
- 真正有效的时机只有两个：HTML 初始解析阶段，或 JS 显式调用
video.load() - 想“升级”加载策略（比如从
none切到auto），必须先清空src，再重设src，再调用.load() - 如果已进入
loadedmetadata状态，再次调用.load()不会重发请求，只能靠src变更触发 - 微信内置浏览器对首次
.load()有延迟限制（约 300ms），建议加setTimeout(() => video.load(), 1)微调
src 已存在。动态插入、display: none、父节点未 append 到 document、甚至 CSS visibility: hidden 都可能导致 preload 完全静默——它不报错，也不警告，就只是不干活。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
