为什么srcset下载两张图片？

Question

我正在为自动srcset和sizes创建的grunt插件进行重大更新，最近我对Chrome的行为感到困惑（我在桌面上使用的是Chrome版本46.0.2490.80米）。我查看了Yoav Weiss'演示，发现当我将浏览器宽度调整为400px-hires和mobile时，Chrome正在下载两张图片。

演示页面上使用的代码如下所示：

<img src="yacht_race@fallback.jpg" srcset="
    img/yacht_race@mobile.jpg 320w,
    img/yacht_race@wide-mobile.jpg 480w,
    img/yacht_race@tablet.jpg 768w,
    img/yacht_race@desktop.jpg 1024w,
    img/yacht_race@hires.jpg 1280w"
  sizes="
    (max-width: 20em) 30vw,
    (max-width: 30em) 60vw,
    (max-width: 40em) 90vw"
  alt="A very exciting yacht race.">

同样的情况发生在personal blog上，其中-large和-medium图像都被加载了。

我已经与Yoav进行过Twitter谈话，他无法重现这个场景。那里的其他人可以重现吗？这是一个浏览器错误吗？我对脑中的响应图像有一个基本的误解吗？任何建议表示赞赏！

Answer 1

这里发生的事情是你得到一个304 - 它就在图像中。这意味着已经缓存了这个图像的某些内容，因此我不打算再次加载它。

所以你实际上并没有下载它。

继续缩小浏览器窗口，然后清除缓存并加载页面。你不会再看到你的'大'图像了。

这是一个简洁的explanation。