媒体查询背景图是否晚于默认背景图加载？高清设备渐进渲染疑问

问题背景 #

需求是为元素实现高清设备上的渐进式背景渲染，现有如下Sass代码：

.element
   background-image: url(image-1x.png)
   background-size: cover

  @media (-webkit-min-device-pixel-ratio: 2)
     background-image: url(image-2x.png)  

疑问点：作为默认背景的小尺寸（非高清）图image-1x.png，是否会优先于媒体查询中的高清图image-2x.png加载？

核心解答 #

是的，image-1x.png会被所有设备优先加载，而image-2x.png只有在满足-webkit-min-device-pixel-ratio: 2条件的高清设备上才会被加载，且加载顺序晚于默认的1x图。

具体逻辑：

• 浏览器会先解析并加载默认样式块中的资源，无论设备是否符合后续媒体查询条件，image-1x.png的请求会最先发起。
• 对于符合高清设备条件的浏览器，在解析到媒体查询块时，才会发起image-2x.png的请求：如果1x图已加载完成，会先显示1x图，等2x图加载完成后替换为高清背景，实现渐进渲染；如果1x图还未加载完毕，浏览器可能会并行加载两张图，但最终会使用2x图作为背景。
• 非高清设备则只会加载image-1x.png，不会请求image-2x.png。

CSS规范参考 #

1. 媒体查询规范：根据CSS Media Queries Level 4规范，媒体查询是基于设备特性选择性应用样式的机制，未匹配媒体查询的样式块中的资源不会被浏览器加载。默认样式（未被媒体查询包裹的）属于所有设备都匹配的样式，其资源会被优先解析加载。
2. 背景图加载规则：CSS Backgrounds and Borders Module Level 3规范明确，浏览器只会加载当前生效样式中指定的背景图资源。对于媒体查询中的样式，只有当查询条件满足时，对应的背景图才会被加载。

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