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

Question

当使用 <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中，避免多个服务器请求？

Answer 1

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