引用文件两次会使加载时间/网页大小增加一倍吗？

Question

这可能是一个愚蠢的问题，但是如果我的网页中有一个视频文件被加载到两个不同的位置，这是否意味着该网页的大小/加载时间增加了一倍，或者是因为它引用的是同一文件，所以该视频只需加载一次？

为清楚起见，视频显示在桌面上的一个位置（使用@media min-width CSS定义的桌面）上，而在移动设备上的其他位置上显示。我没有使用CSS重新定位同一视频，而是在html中第二次调用了它。这是个坏习惯吗？

Answer 1

否，它不会两次加载CSS或脚本。但是，两次引用相同的文件（CSS，JS文件）是不好的做法。 有关确切的信息，您可以始终参考浏览器控制台的“网络”选项卡来加载哪些资源以及花费了多少时间。以下是相同的参考。

Answer 2

是的， 负载太大了。我在桌面视图中有解决方案。请在 display：none css属性和移动视图下移动应用的视频。请在桌面上观看应用了 display：none 的视频。请使用下面的代码。

示例：

html :
<div class="demo-video">
<video src="video/demo.mp4" class="desktop-view"></video>   
<video src="video/demo.mp4" class="mobile-view"></video>   
</div>

css:   
   .mobile-view { display:none; }
   @media screen only (max-width:767px) { .desktop-view { display:none; }
   .mobile-view { display:block; }   }