媒体元素自动播放策略不阻塞首帧渲染，真正影响首帧的是preload设置、首屏位置、隐藏状态及容器结构深度；preload="metadata"是首屏视频合理底线，defaultmuted与muted混用会导致readystate=0卡顿，需统一配置并避免深层嵌套。
媒体元素（<video></video>、<audio></audio>）的自动播放策略本身不阻塞首帧渲染，但错误配置会间接拖慢首帧——关键不在“播不播”，而在“浏览器要不要为它做额外解析、预加载和状态协商”。
autoplay 属性写不写，对首帧渲染几乎没影响
现代浏览器看到 autoplay 会直接跳过执行逻辑，既不触发播放，也不报错，更不会阻塞 HTML 解析或 DOM 构建。它只是个“建议标记”，不是指令。
- Chrome ≥66、Safari ≥11、Firefox、Edge 都已默认忽略未静音的
autoplay，连请求都不发 - 即使写了
<video autoplay></video>，只要没muted，视频资源根本不会开始下载，自然不影响首帧 - 真正影响首帧的是：是否设置了
preload、是否在首屏位置、是否被display: none或visibility: hidden隐藏
preload="metadata" 是首屏视频的合理底线
preload 才是影响首帧的关键开关。它决定浏览器是否提前拉取元数据（时长、分辨率、封面图），而这直接影响 poster 渲染速度和控件初始化时机。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
preload="none"：首帧必须等用户点击才发起请求，首帧延迟 = 网络 RTT + DNS + TCP + TLS + 视频头部下载时间 -
preload="metadata"：只下几百字节头部，足够渲染poster和播放控件，首帧可做到 200ms 内可见（尤其配合fetchpriority="high"） -
preload="auto"：可能触发整段缓存，但移动端常被 Safari 降级为metadata，且易挤占首屏关键资源带宽 -
<video></video>不支持loading="lazy"，写上也无效；首屏视频必须显式设preload="metadata"
defaultMuted 和 muted 混用导致首帧卡在 readyState=0
很多页面首帧不动，不是因为没播，而是 video.readyState 停在 0（HAVE_NOTHING）。常见原因是 defaultMuted 和 muted 同时存在却未同步，触发浏览器内部状态不一致。
-
defaultMuted="true"只在元素创建时设初始值，之后 JS 修改muted才生效；若两者冲突（比如 HTML 里写defaultMuted="true" muted="false"），部分 Safari 版本会拒绝加载 - 首帧卡住的典型现象：
video.paused === true、video.readyState === 0、Network 面板看不到任何媒体请求 - 修复方式：只保留
muted，删掉defaultMuted；或确保两者值一致，并监听loadeddata后再检查element.muted = true - 注意：iOS Safari 对
defaultMuted支持极弱，部分版本直接忽略，不能作为兜底手段
首屏视频容器结构过深会延长 poster 渲染时间
哪怕 preload="metadata" 正常工作，如果 <video></video> 嵌套在 6 层以上 <div> 中，浏览器仍要多花几十毫秒创建 DOM 节点、计算样式、定位 <code>poster 图片位置——这对首帧渲染是实打实的损耗。
- 用 Chrome DevTools → Elements 面板右键
<video></video>→ “Show DOM properties”，看depth值；超过 6 就该重构 - 优先用
<section></section>、<main></main>替代纯<div class="wrapper"><div class="content"><div class="inner"> 堆叠 <li> <code>poster图片本身应加fetchpriority="high"和decoding="async"，避免解码阻塞主线程 - 避免把
<video></video>放在<table> 单元格里——表格布局重排开销大，叠加嵌套极易触发同步 layout <p>真正容易被忽略的是：首帧渲染快慢，不取决于你有没有调用 <code>play()，而取决于浏览器是否能在解析完 HTML 的瞬间，就拿到足够信息去绘制poster并准备控件。所有策略都要围绕这个“瞬间”展开，而不是围绕“怎么让它播”。
