这段关于响应式设计的视频有问题

Question

所以我正在观看 this 关于响应式设计的视频，该视频中的某些内容让我感到困扰。在 2:59，他将窗口升到大屏幕然后刷新，然后 Safari 下载 banner_large.jpg，当他对中小屏幕尺寸做同样的事情时，Safari 分别下载 banner_medium.jpg 和 banner_small.jpg .但是随后可以看到他能够调整浏览器的大小，并且横幅也会相应更改（注意达到阈值时图像的“跳跃”）。所以问题是，如果 Safari 不下载其他两个图像，那么它如何显示它们呢？我在这里遗漏了什么吗？

Answer 1

他在Web Inspector 中选择了Network Requests 部分。这只会在页面向服务器发送请求以获取文件时显示。他已经在视频的开头调整了页面的大小，这会在当时请求文件（假设它们没有从以前的时间缓存）。因此，假设开启了缓存，当他在检查器打开的情况下调整页面大小时，它不会再次请求文件。

为了显示文件大小，他刷新了页面，迫使浏览器重新下载所有文件并在Web Inspector 中显示它们。你可以看出他这样做是因为当他第一次打开Network Requests 部分时，它是空的（因为没有请求任何内容）。在此之后，他说，“然后点击重新加载”，然后他重新加载页面，该页面显示正在下载的页面上的所有文件。你可以看出它们都被重新下载了，因为在Cached 列中，所有文件都显示为No，它显示了index.html 的内容以及其他可能被缓存的文件，例如css 文件和背景渐变。