<picture> HTML 源会发出多个服务器请求还是仅发出一个请求？答案

【问题标题】：Do <picture> HTML sources make several server requests or just one?<picture> HTML 源会发出多个服务器请求还是仅发出一个请求？
【发布时间】：2021-02-03 21:11:46
【问题描述】：

当使用<picture> HTML 并且您指定多个来源并且每个来源都有一个媒体属性时，浏览器是否会自动同时呈现两个来源，还是只加载一个来源，除非调整屏幕尺寸？

例如：

<picture>
   <source srcset="/someimage.webp" type="image/webp" media="(min-width:1000px)" >
   <source srcset="/somesmallerimage.webp" type="image/webp" media="(max-width: 999px)" >
   <img src="/someimage.jpg">
</picture>

浏览器是否会发出 2 个服务器请求，一个用于 /someimage.webp，另一个用于 /somesmallerimage.webp？或者它会根据屏幕大小只发出 1 个服务器请求？如果是后者，在调整屏幕大小时，服务器是否会再次发出请求？如果是前者，有什么办法可以将<picture>元素懒加载到DOM中，避免多次服务器请求？

【问题讨论】：

不确定，但您可以通过实验找到答案。在浏览器的开发人员工具中使用 Newtork 选项卡。加载页面，看看下载了什么。调整页面大小，查看是否加载了其他资源。它可能会或可能不会因浏览器而异。如果您得到结果，请随时回答您自己的问题。

标签： html picturefill

【解决方案1】：

我按照 cmets 的建议之一使用了 Chrome 的开发工具，并查看了网络选项卡中正在加载的内容。看起来 <picture> 元素根据媒体条件一次只加载到 1 个源中，但是当屏幕调整大小时，它会加载到另一个源中。源是相互独立加载的。

【讨论】：