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

问题

浏览器加载和渲染 HTML 中的 <img>、<picture> 和 CSS 中的 background-image 遵循什么规则？

解答

浏览器渲染流程

浏览器渲染页面经过以下步骤：

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

图片加载时机

根据渲染流程，图片加载遵循以下规则：

HTML 中的图片

• 解析 HTML 时遇到 <img> 或 <picture> 标签，立即加载图片
• JavaScript 动态创建的 <img> 元素添加到 DOM 树后加载

CSS 中的背景图片

• 解析 CSS 时遇到 background-image，不会立即加载，只是添加到样式规则树
• 只有当样式规则匹配到 DOM 元素（构建渲染树时），才会加载背景图片

图片加载规则

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

具体规则如下：

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

img {
  display: none;
}

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

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

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

<div style="display: none;">
  <img src="image.jpg" />
  <div class="box"></div>
</div>

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

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

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

<img src="image.jpg" />
<div class="box1"></div>
<div class="box2"></div>

.box1 {
  background-image: url('image.jpg');
}
.box2 {
  background-image: url('image.jpg');
}

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

规则 4：未匹配到 DOM 的样式

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

• 如果页面中没有 .non-existent 元素，图片不会加载

规则 5：伪类触发加载

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

• 伪类（如 :hover）引入的背景图片，只有触发伪类时才会加载

关键点

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