为何部分网站使用占位div而非直接使用video标签实现视频播放？

这种实现是非常典型且实用的前端性能优化手段，对页面加载速度，尤其是首屏加载性能有明确的正向提升作用。核心优化逻辑就是把非首屏必需、非用户主动触发的资源请求延后到真正需要的时候再发，是懒加载思路的一种落地方式。

• 原生<video>标签哪怕配置了poster属性、显式设置preload="none"，不同浏览器在解析到标签时的默认行为并不统一：大部分浏览器会自动发起poster封面图请求、视频元数据（时长、分辨率、首帧信息）请求，部分浏览器还会预加载一小段视频内容。如果一个页面有3个以上的视频位，这些初始就触发的请求会占用有限的TCP连接和带宽资源，挤占首屏核心的文本、CSS、关键JS、首屏图片的加载优先级，直接拖慢首屏渲染速度，拉低LCP（最大内容绘制）指标。
• 占位div方案初始渲染时，DOM结构里只有一个和视频尺寸一致的普通div，搭配一个播放图标（通常是内联SVG或者合并到站点公共雪碧图里的图标资源），不会触发任何视频相关的额外请求，DOM节点渲染成本极低，完全不会占用首屏阶段的核心资源带宽，首屏加载速度提升非常明显，尤其是视频位较多的资讯、内容类信息流页面，优化效果肉眼可见。
• 别觉得这是什么偏门奇技淫巧，现在主流的内容平台、视频网站的信息流列表，基本都在用这套方案做视频位的加载优化。

• 一定要提前给占位div设置好和视频完全匹配的宽高比，避免后续插入video标签时产生布局偏移，影响CLS（累积布局偏移）指标，反而拉低页面体验分。
• 用户点击播放图标后动态插入的<video>标签，记得配置好对应播放属性，因为触发动作是用户主动点击发起的，完全符合浏览器的自动播放策略要求，不会出现视频被拦截无法播放的问题，正常触发播放即可，整个过程用户完全感知不到DOM的动态变化，和直接嵌入video的视觉、交互体验没有差异。

内容的提问来源于stack exchange，提问作者Blackwater