同一源的多张不同尺寸图片加载耗时是否与多张不同源图片相同？

核心原因是浏览器的缓存机制，具体细节如下：

• 当页面加载第一个<img>标签时，浏览器会发起HTTP请求下载img_girl.jpg，并把这个资源缓存到本地（只要服务器返回的缓存规则允许）。
• 后面两个<img>标签的src完全相同，浏览器会直接从本地缓存读取资源，不会再发起新的网络请求，几乎是瞬间加载。
• 如果是三张来源不同的图片，每个<img>的src都不一样，浏览器会分别发起三次独立的网络请求，每次都要完整下载对应的图片文件，总耗时是三次请求的时间之和（包括DNS解析、连接建立、数据传输等所有环节）。

额外补充：

• 即使缓存失效（比如缓存过期、服务器禁用了缓存），浏览器也会对相同src的请求做优化——通常只会发起一次下载请求，拿到资源后同时供给三个<img>标签使用，依然比三张不同来源的图片加载更快。
• 你设置的width和height只是浏览器渲染时的显示尺寸，不会影响图片资源本身的下载大小，三个标签下载的都是同一个原图片文件。

内容的提问来源于stack exchange，提问作者Олег О