首次加载页面时浏览器如何处理重复的同名静态资源请求？

重复同名静态资源的首次加载处理逻辑 #

浏览器不会直接忽略其余同名资源，也不会无脑发起多次重复网络请求，实际运行逻辑如下：

• 如果前一个相同URL的资源请求已经加载完成并进入缓存，后续同URL的资源引用会直接命中浏览器内存缓存，不会发起新的网络请求
• 如果前一个相同URL的资源请求还在传输中（处于pending状态），现代主流浏览器会自动做请求合并，后续同URL的引用会复用同一个正在传输的请求，不会重复建立网络连接
• 唯一的例外是如果资源响应头明确配置了Cache-Control: no-store禁止缓存，才会对每一个引用都发起独立的网络请求

首次请求资源的缓存规则 #

首次请求的静态资源是否会被缓存，完全由服务端返回的HTTP缓存响应头决定：

• 如果服务端没有返回任何明确的禁止缓存配置，浏览器默认会对静态资源做短期缓存，足以覆盖同页面内的重复引用场景
• 如果服务端配置了Cache-Control: max-age=xxx，资源会按照配置的时长存在磁盘缓存中，跨页面访问也可以复用
• 如果服务端配置了Cache-Control: no-cache，资源会被缓存，但每次使用前需要向服务端校验资源是否有更新
• 如果服务端配置了Cache-Control: no-store，资源完全不会被缓存，每次引用都要重新请求

相关主题检索关键词 #

你可以用以下关键词查找更深入的技术资料：

• 浏览器同页面重复资源请求去重逻辑
• 浏览器静态资源请求合并规则
• HTTP 缓存同页面生效策略
• 浏览器内存缓存命中规则

内容的提问来源于stack exchange，提问作者Jessica Talzor