为何4个指向同一图片的img标签，浏览器仅发1次HTTP GET请求？

单条请求现象的根本原因 #

这不是浏览器的异常加载行为，恰恰是现代浏览器内置的同页资源请求去重机制的正常表现，你之前对浏览器资源加载的运行逻辑存在认知偏差。

具体运行逻辑是这样的：

• 浏览器从上到下解析HTML文档时，会按顺序扫描遇到的所有资源引用，碰到第一个src="lily.jpg"的img标签时，立刻向浏览器网络栈发起这个图片的HTTP GET请求，此时请求处于 pending（等待响应传输）状态
• 当解析器继续往下扫描，碰到后面3个src同样是lily.jpg的img标签时，浏览器检测到这个URL对应的资源已经有一个正在传输的未完成请求，根本不会为这三个标签触发任何独立的资源加载流程——既不会发新的网络请求，也不会走本地缓存的查找逻辑
• 浏览器会把这三个img标签的图片渲染回调，直接绑定到第一个处于飞行中的lily.jpg请求上：等这唯一一次网络请求的响应下载完成后，同一份图片数据会同时供给全部4个img标签完成渲染，全程没有任何额外的请求开销。

对原有认知的误区澄清 #

你之前以为"哪怕资源完全相同，浏览器也要发起4次独立请求，后3次哪怕从缓存读取也会在Network面板留下记录"的逻辑，和现代浏览器的实际设计并不匹配：

• 只有当同URL的资源引用，出现在第一个资源请求的全流程（响应下载、资源解析）完全结束之后，浏览器才会针对后续的同URL引用触发本地缓存查找流程，这时候Network面板才会显示独立的缓存命中条目（标注为from memory cache或from disk cache，不会产生真实的网络交互）
• 如果同URL的引用是在第一次请求还处于pending传输阶段就被解析到，浏览器连缓存查找环节都不会为后续引用触发，直接复用飞行中的请求结果，因此Network面板全程只会记录1条真实的网络请求日志。

这种请求去重优化是浏览器加载层的通用设计，对脚本、样式表、字体、媒体资源等所有类型的静态资源都生效，核心目的就是避免同页面内重复URL导致的无效请求，降低带宽消耗、缩短页面整体加载耗时。

内容的提问来源于stack exchange，提问作者Deen John