HTML 和 CSS 中图片的加载和渲染时机

在我看了超多篇资料，以及手动实践以后，总算总算，搞清了 web 图片的加载和渲染时机。啊，我需要掌声 👏👏👏～

开始步入主题了啊！准备！冲！

1. 浏览器工作流程

---

图片版：

webkit 引擎

文字版：

• 解析 HTML —> 构建 DOM 树
• 加载样式 —> 解析样式 —> 构建样式规则树
• 加载 JavaScript —> 执行 JavaScript 代码
• 结合 DOM 树和样式规则树来构建渲染树
• 计算元素位置进行布局
• 绘制

2. 图片的加载和渲染时机

---

• 解析 HTML【遇到<img>标签加载图片】 —> 构建DOM树
• 加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树
• 加载 JavaScript —> 执行 JavaScript 代码
• 结合 DOM 树和样式规则树来构建渲染树【遍历DOM树，加载对应样式规则上的背景图片】
• 计算元素位置进行布局
• 绘制【开始渲染图片】

总结：
1. 加载图片时机：
   解析 HTML 时候
   构建渲染树的时候
2. 渲染图片时机：
   最后绘制页面时

只要掌握这个总结，再去对应相应规则，很快就能理解图片到底加载与否啦～

3. 上例子

---

3.1 元素 display: none

• 页面说明：页面上有个 img 和 含有背景图的div，两者都设置了 display: none;

      <style>
        img {
          display: none;
        }
        .bg-wrapper {
          display: none;
          background-image: url("./blue.png");
        }
      </style>
  
      <img src="./green.png" />
      <div class="bg-wrapper"></div>
  

• 图片资源加载情况：只会加载 img 的图片
• 说明：
  解析 HTML，遇到 img 元素，加载图片；
  解析 CSS，遇到背景图片不加载；
  渲染树没有 img，不渲染图片；也没有 div，不会去加载它的背景图，更不会去渲染。

3.2 容器 display: none

• 页面说明：页面上有个div容器，设置了 display: none；包含一个 img 和 含有背景图的div；

      <style>
        .wrapper {
          display: none;
        }
        .bg-wrapper {
          background-image: url("./blue.png");
        }
      </style>
  
      <div class="wrapper">
        <img src="./green.png" />
        <div class="bg-wrapper"></div>
      </div>
  

• 图片资源加载情况：只会加载 img 的图片
• 说明：
  解析 HTML，遇到 img 元素，加载图片；
  解析 CSS，遇到背景图片不加载；
  渲染树没有外层 div 容器，所以不会去加载子元素的背景图，更不会渲染出来。

3.3 多处使用同一张图片

• 页面说明：页面上两个 img，还有一个含有背景图的 div，它们都用到了同一张图

      <style>
        .bg-wrapper {
          background-image: url("./green.png");
        }
      </style>
  
      <img src="./green.png" />
      <img src="./green.png" />
      <div class="bg-wrapper"></div>
  

• 图片资源加载情况：只会加载图片一次
• 说明：
  浏览器请求资源时，都会先判断是否有缓存，若有缓存且未过期则会从缓存中读取，不会再次请求。先加载的图片会存储到浏览器缓存中，后面再次请求同路径图片时会直接读取缓存中的图片。

3.4 未用到的背景图

• 页面说明：有两个 class，其中一个类名并未被使用到。

      <style>
        .other {
          background-image: url("./blue.png");
        }
         .bg-wrapper {
          background-image: url("./green.png");
        }
      </style>
  
      <div class="bg-wrapper"></div>
  

• 图片资源加载情况：只会加载使用到的背景图
• 说明：
  渲染树找不到一个 DOM 元素应用到这个类名，所以不会去加载它，更不会去渲染它。

3.5 伪类应用到背景图片

• 页面说明：div 在 hover 的时候改变背景图片

      <style>
        .other {
          background-image: url("./blue.png");
        }
         .bg-wrapper {
          background-image: url("./green.png");
        }
      </style>
  
      <div class="bg-wrapper"></div>
  

• 图片资源加载情况：
  hover前：只加载一个

  
  hover后：再加载另外一个

• 说明：
  触发 hover 前，构建渲染树过程中，遍历 DOM 树时，该元素匹配的样式规则是无 hover 状态选择器样式，因此加载对应背景图。此时没有元素匹配到hover 后的选择器样式，因此不会去加载 hover 后的背景图。
  触发 hover 后，该元素匹配的是有 hover 状态选择器样式，因此加载有 hover状态选择器的背景图。