HTML 和 CSS 中的图片加载与渲染规则

问题

浏览器在解析 HTML 和 CSS 时，对于 <img>、<picture> 和 background-image 引入的图片，加载和渲染的规则是什么？

解答

浏览器渲染流程

浏览器渲染页面的基本流程：

1. 解析 HTML，构建 DOM 树
2. 解析样式，构建样式规则树
3. 加载并执行 JavaScript
4. DOM 树和样式规则匹配，构建渲染树（不包含 display: none 的节点）
5. 计算元素位置，进行布局
6. 绘制页面

图片加载时机

根据渲染流程，图片的加载时机如下：

HTML 中的图片

解析 HTML 时，遇到 <img> 或 <picture> 标签会立即加载图片。

<img src="image.jpg" alt="示例图片">
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="示例图片">
</picture>

CSS 中的背景图

解析样式时，background-image 不会立即加载，而是在构建渲染树、匹配到 DOM 元素时才加载。

.box {
  background-image: url('bg.jpg');
}

JavaScript 动态添加

JavaScript 创建的 <img> 元素会添加到 DOM 树，动态添加的 background-image 规则会添加到样式规则树，加载时机遵循上述规则。

加载和渲染规则

重要：Web 页面中不是所有的图片都会加载和渲染。

具体规则如下：

规则 1：元素自身设置 display: none

<img src="image.jpg" style="display: none;">
<div style="display: none; background-image: url('bg.jpg');"></div>

• <img> 和 <picture>：图片会加载，但不会渲染
• background-image：图片会加载，但不会渲染

规则 2：祖先元素设置 display: none

<div style="display: none;">
  <img src="image.jpg">
  <div style="background-image: url('bg.jpg');"></div>
</div>

• <img> 和 <picture>：图片会加载，但不会渲染
• background-image：图片不会加载，也不会渲染

规则 3：相同图片只加载一次

<img src="image.jpg">
<div style="background-image: url('image.jpg');"></div>

相同路径的图片文件只会加载一次，浏览器会复用缓存。

规则 4：样式未匹配到 DOM 元素

.non-existent {
  background-image: url('bg.jpg');
}

如果样式选择器没有匹配到任何 DOM 元素，background-image 不会加载。

规则 5：伪类触发加载

.box:hover {
  background-image: url('hover-bg.jpg');
}

伪类（如 :hover）引入的 background-image 只有在伪类被触发时才会加载。

关键点

• <img> 和 <picture> 在解析 HTML 时立即加载，background-image 在匹配到 DOM 元素时才加载
• 元素自身设置 display: none 时，图片会加载但不渲染
• 祖先元素设置 display: none 时，background-image 不加载也不渲染，但 <img> 会加载
• 相同路径的图片只会加载一次，浏览器会复用缓存
• 伪类的 background-image 只在伪类触发时加载