html5视频性能优化的关键在于让解码、帧提取和渲染避开主线程。优先启用decoding="async"属性，搭配preload="metadata"；使用offscreencanvas处理帧；确保moov atom前置；合理设置preload和播放策略。
HTML5 视频性能优化的关键，不在于单纯压缩体积或选对编码格式，而在于让视频解码、帧提取和渲染各环节尽量避开主线程——因为主线程一旦被占满，页面就会卡顿、交互失灵、滚动掉帧。
优先启用异步解码
现代浏览器（Chrome 114+、Firefox 115+）支持 decoding="async" 属性，它会将视频解码任务移交至独立线程，避免阻塞 JavaScript 执行和 UI 渲染。不是所有视频都默认启用，需显式声明：
- 在
<video></video>标签中添加decoding="async"，例如：<video src="demo.mp4" decoding="async"></video> - 注意：iOS Safari 目前不支持该属性，但不影响兼容性——它会被安全忽略
- 搭配
preload="metadata"使用，可进一步减少初始加载时的主线程压力
避免 canvas 帧读取触发同步布局
当用 ctx.drawImage(video, ...) 抓取视频帧并做图像分析（如人脸识别、颜色统计）时，若紧接着调用 ctx.getImageData() 或 ctx.getTransform() 等读取操作，会强制浏览器同步完成当前帧渲染，引发布局抖动。
- 改用
OffscreenCanvas：创建离屏画布，在 Web Worker 中处理帧数据，完全隔离主线程 - 若必须在主线程操作，确保“写”与“读”分离：先批量绘制多帧，再统一读取；不要“绘一帧→读一帧→绘一帧”循环
- 禁用不必要的像素处理：如无需 Alpha 通道，用
ctx.imageSmoothingEnabled = false加速绘制
控制 moov atom 位置与容器格式
视频文件头部缺失关键元数据（moov atom），会导致浏览器边下载边解析，反复 seek、重试，长时间阻塞主线程等待首帧就绪。
- 统一使用 MP4（isom 格式），而非 WebM/AVI；iOS Safari 对 VP9/WebM 解码效率低，易造成卡顿
- 用
ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4将 moov atom 移至文件开头 - 避免服务器返回分块传输（chunked encoding）且未设置
Content-Range的流式响应——这会让 HTML5 video 元素无法准确预估时长和缓冲进度
合理设置预加载与播放策略
自动播放、全量加载、后台解码等行为若无节制，会在用户未感知时悄悄吃掉主线程资源。
- 非首屏视频设
preload="none"；仅需封面图时，用 poster 属性替代真实视频加载 - 有声音的自动播放需用户手势触发（如点击后调用
play()），否则会被静音且可能中断解码流程 - 监听
canplaythrough而非loadeddata判断是否可流畅播放，后者仅代表首帧就绪，不代表后续不卡
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
