重复引用同一视频文件是否会加倍网页加载时间与大小？是否属不良习惯？

嘿，好问题！咱一步步拆解给你看：

首先明确：网页加载大小不会翻倍，加载时间也不会因为两次引用同一个视频而显著增加。

这得益于浏览器的HTTP缓存机制——当浏览器第一次下载了目标视频文件后，会把它存在本地缓存里。第二次遇到同一个URL的视频引用时，浏览器会直接从本地缓存读取，不会再向服务器发起新的下载请求。除非你的服务器设置了特殊的缓存禁用策略（比如Cache-Control: no-cache），否则默认都会走缓存逻辑。

不过要注意：如果两个视频的URL哪怕有一点点不一样（比如一个是/video.mp4，另一个是/video.mp4?v=1），浏览器会认为是不同的资源，可能会重新下载，这点要避免。

这种在HTML里写两个相同视频元素的做法，确实属于不太推荐的不良习惯，原因有这几点：

• 冗余DOM节点：多一个视频元素就多了一个DOM节点，虽然不会增加资源下载量，但过多的DOM会轻微影响页面的渲染性能，尤其是在性能较弱的移动端设备上。
• 维护成本高：以后如果要修改视频地址、调整播放属性（比如加autoplay、改controls），你得同时改两处，很容易出现漏改的情况，后期维护会很麻烦。
• 不符合语义化：同一个内容重复渲染两次，从HTML语义化的角度来说也不合理，毕竟这本质上是同一个视频，只是展示位置不同。

更优的解决方案 #

用CSS的@media查询来控制同一个视频元素的位置就好，既简洁又好维护。举个简单的例子：

<!-- 只需要一个视频元素 -->
<video id="responsive-video" src="your-video.mp4" controls></video>

/* 桌面端样式 */
#responsive-video {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 600px;
}

/* 移动端样式 */
@media (max-width: 768px) {
  #responsive-video {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin: 20px 0;
  }
}

这样不管在桌面还是移动端，都是同一个视频元素，只是通过CSS调整了它的位置和尺寸，完美解决你的需求。

当然，如果你的场景有特殊需求（比如移动端和桌面端需要视频处于不同的播放状态、或者有不同的自定义控件），那重复写两个元素可以理解，但绝大多数普通场景下，用CSS控制是最优解。

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