CSS多背景图片加载规则及性能影响技术问询

嘿，这个问题问到点子上了，很多开发者都会对多背景图片的加载逻辑有疑惑，我来给你逐一拆解清楚：

1. 指定的所有图片是否都会加载？ #

答案是肯定的，不管这些图片最终会不会在页面上视觉显示（比如第一张完全覆盖了后面的图片），浏览器都会并行发起所有背景图片的加载请求。举个例子，你写了这样的代码：

div {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-size: cover;
  background-repeat: no-repeat;
}

哪怕img_flwr.gif把整个div都铺满了，paper.gif完全看不到，浏览器还是会同时去请求这两张图片，不会因为视觉上不可见就跳过加载。

2. 若第一张图片不可用，第二张才会加载吗？ #

不会。浏览器处理多背景图片的请求是并行触发的，不会等待第一张图片的加载结果（不管是成功还是失败）才去加载后面的图片。也就是说，哪怕img_flwr.gif返回404错误，paper.gif的请求早在浏览器解析CSS的时候就已经发出去了，不会因为第一张的异常而延迟加载。

3. 所有图片均会加载，是否会影响网站加载时长？ #

这得分情况来看：

• 如果这些图片都是页面展示必需的资源，那额外的图片请求肯定会增加总资源体积，尤其是图片本身比较大的时候，会拉长页面的整体加载时间，甚至影响核心Web指标（比如最大内容绘制LCP）。
• 如果其中部分图片是“备用”性质的（比如只有在第一张加载失败时才需要显示），那这种提前加载就属于资源浪费了——不仅占用了用户的带宽，还可能挤占其他关键资源的加载优先级，拖慢页面加载速度。

这种备用场景下，更合理的做法是用JavaScript监听第一张图片的加载状态，只有当它加载失败时，再动态设置第二张图片作为背景；或者使用CSS的条件判断特性做按需加载，避免不必要的资源请求。

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