为何CSS背景图未出现在Network请求中？求Chrome/FF加载机制解析

浏览器加载CSS背景图的核心规则 #

• 浏览器会先构建DOM树与CSSOM树，合并生成渲染树后，仅会加载渲染树中可见且处于激活状态（非display:none、非visibility:hidden、未被完全裁剪等）元素的background-image资源。
• 常规情况下，这类请求的发起者会显示为对应的CSS文件，但如果是通过伪元素、动态样式注入等方式设置的背景图，发起者可能会显示为stylesheet或无明确关联文件。

特殊情况的具体成因 #

1. 背景图通过CSS伪元素设置 #

目标页面顶部的背景图大概率是通过::before/::after伪元素实现的，这会导致你的两段JS代码都无法检测到：

• 第一段代码用getElementsByTagName('*')仅能遍历真实DOM节点，伪元素不属于DOM树的一部分，自然无法被获取到。
• 第二段代码仅限定扫描DIV/P/SECTION/SPAN几种节点，且同样不会处理伪元素（伪元素不会出现在节点的childNodes列表中）。

2. Network无请求的可能原因 #

• 伪元素未被渲染：如果伪元素的CSS规则依赖某些条件（比如父元素的状态、媒体查询不匹配、样式优先级被覆盖），导致它未被纳入渲染树，浏览器就不会发起图片请求。
• 背景图为Data URI格式：如果图片被编码为base64格式嵌入CSS中（如background-image: url(data:image/png;base64,...)），则不会产生Network请求，因为图片内容直接包含在CSS文件内。

你的JS代码存在的缺陷 #

• 均未考虑CSS伪元素的场景，而伪元素是页面中设置背景图的常见方式。
• 第二段代码限制了扫描的节点类型，可能遗漏其他设置了背景图的元素（如header、button等）。

验证方法 #

• 在DevTools的Elements面板中，勾选顶部的「Show pseudo elements」选项，查看是否存在设置了目标背景图的伪元素。
• 查看对应CSS规则，确认背景图的URL格式，以及是否存在媒体查询、条件样式导致伪元素未被激活。

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