preload在弱网下必须动态切换：auto基本无效，metadata可能卡首帧且不可中断，none更可控；需结合fetch探测、networkstate监听及服务端响应头综合判断网络质量，并配合faststart与accept-ranges才能生效。
preload 属性在弱网下不能硬设固定值，必须结合网络状态、用户意图和资源类型动态切换——设成 auto 基本无效，metadata 在弱网也可能卡住首帧，none 反而是更可控的起点。
怎么判断当前是不是弱网，再决定 preload 值
不能只靠 navigator.connection.effectiveType，它延迟高、精度差，且 iOS 不支持。真实弱网信号得从请求响应中实时捕获：
- 用
fetch()加AbortController探测首屏关键资源（如封面图、视频元数据接口）的响应时间，连续两次response.time > 800ms就标记为弱网 - 监听
video.networkState：若长期处于NETWORK_LOADING或反复在NETWORK_IDLE/NETWORK_LOADING间跳变，说明底层连接不稳定 - 服务端可通过 UA + IP 地址段预判区域网络质量，返回带
X-Network-Quality: slow-2g的响应头，前端读取后直接降级
preload="metadata" 在弱网下为什么反而更危险
它看似轻量，但实际是“不可中断的小请求”：浏览器发起后无法用 AbortController 中断，卡住就阻塞 JS 主线程，且不触发 onerror——你根本不知道它挂了多久。
- moov box 不在文件开头（即 FFmpeg 没加
-movflags +faststart）时，preload="metadata"会退化成下载前几 MB 才能解析，弱网下就是流量黑洞 - 服务端没返回
Accept-Ranges: bytes，浏览器只能全量请求，metadata失效 - 首屏关键视频建议默认设
preload="none"，等用户点击播放按钮再手动调用video.load()，把加载时机攥在自己手里
怎么让 preload 行为真正可配置、可降级
不要写死在 HTML 里，用 JS 动态控制 video.preload 和 video.src 的赋值时机：
- 初始只设
src为空，preload保持默认或显式设"none" - 用户 hover 播放按钮时，设
preload = "metadata"并立即fetch元数据接口（不是直接load()），成功后再赋值真实src - 用户 click 后才调用
video.load()；若之前探测到弱网，直接跳过preload="metadata"，用内联 poster + 静态时长文案代替 - 微信 X5 内核对首次
load()有静默丢弃风险，可加setTimeout(() => video.load(), 0)微调
真正容易被忽略的是：所有这些逻辑都依赖服务端配合——没有 Accept-Ranges、没有 faststart、没有带质量标识的响应头，前端 preload 写得再细也没用。弱网优化从来不是单点属性的事，而是一条链路的协同校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
