为何同时设置srcset与src的img标签在Chromium下会下载两张图片？

这个是Chromium内核浏览器**预加载扫描器（Preload Scanner）**的已知行为，不属于代码逻辑错误：

• 预加载扫描器的作用是在HTML主解析器解析DOM、处理CSS/JS阻塞的过程中，提前扫描HTML里的资源链接（比如img的src、script的src等）发起请求，提升加载速度
• 目前Chromium的预加载扫描器不会等待img标签的srcset、sizes属性完全解析完成，只要扫到src属性就会先发起对应资源的下载；后续主解析器处理完srcset和sizes规则，判断小屏需要加载476w的图片时，会再发起一次小图的下载请求，最终就出现同时下载两张图的情况
• 火狐浏览器的预加载逻辑针对带srcset的img标签做了特殊处理，会等sizes和srcset规则解析完成后再确定要下载的资源，所以不会出现重复下载的问题。该问题和属性顺序无关，你调整src顺序没用也是这个原因，预加载扫描器是直接扫描HTML字符串里的src属性值，不关心属性排列顺序。

• 方案1：改用<picture>标签组织多规格图片，示例代码如下，Chromium的预加载扫描器对<picture>的source标签规则识别更完善，会匹配媒体查询后再下载对应资源，不会提前下载img的src资源

<picture>
  <source media="(max-width: 500px)" srcset="/img/some-img-476w.png 476w">
  <source media="(min-width: 501px)" srcset="/img/some-img.png 950w">
  <img src="/img/some-img.png" class="..." alt="Some alt text">
</picture>

• 方案2：将src属性默认值设置为最小尺寸的图片，这样即使预加载先下载了小图，小屏下刚好匹配需要的资源，大屏下后续解析完srcset规则后会下载大图，若站点小屏用户占比更高，这个方案的资源损耗更低
• 方案3：如果站点已经启用了图片懒加载，可以把src、srcset、sizes都放在data-*自定义属性里，等JS执行懒加载逻辑的时候再赋值到对应原生属性上，完全规避预加载扫描器的提前请求问题

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