Web图片资源的加载与渲染时机

快来打我* 2022-05-23 09:50 141阅读 0赞

原文出处：  [Leechikit][]

此文研究页面中的图片资源的加载和渲染时机，使得我们能更好的管理图片资源，避免不必要的流量和提高用户体验。

## 浏览器的工作流程 ##

要研究图片资源的加载和渲染，我们先要了解浏览器的工作原理。以Webkit引擎的工作流程为例：

![005K6mYCgy1fi262ex74qj30hc081q3m.jpg][]

从上图可看出，浏览器加载一个HTML页面后进行如下操作：

*  解析HTML —> 构建DOM树
 *  加载样式 —> 解析样式 —> 构建样式规则树
 *  加载javascript —> 执行javascript代码
 *  把DOM树和样式规则树匹配构建渲染树
 *  计算元素位置进行布局
 *  绘制

从上图我们不能很直观的看出图片资源从什么时候开始加载，下图标出图片加载和渲染的时机：

*  解析HTML【遇到`<img>`标签加载图片】 —> 构建DOM树
 *  加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树
 *  加载javascript —> 执行javascript代码
 *  把DOM树和样式规则树匹配构建渲染树【加载渲染树上的背景图片】
 *  计算元素位置进行布局
 *  绘制【开始渲染图片】

## 图片加载与渲染规则 ##

页面中不是所有的`<img>`标签图片和样式表背景图片都会加载。

### display:none ###

JavaScript

<table style="margin-left:0px;font-size:13px;border:none;margin-top:0px;margin-right:0px;margin-bottom:0px;padding:0px;border-spacing:0px;width:auto;background:none;table-layout:auto;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;"> 
   <td style="font-size:13px;text-align:center;background-image:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;background-color:rgb(238,238,238);"> 
    <div style="border:none;margin:0px;padding-right:0px;padding-left:0px;background:none;text-align:left;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:15px;"> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       7 
     </div> 
    </div></td> 
   <td style="font-size:13px;text-align:center;width:581.333px;background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;"> 
    <div style="margin:0px;padding-right:0px;padding-left:0px;text-align:left;color:rgb(0,0,0);white-space:pre;border:none;padding-top:5px;padding-bottom:3px;background:none;line-height:15px;"> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(255,0,0);">&lt;style&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">.img-purple </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">background-image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;">url</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;">../image/purple.png</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(255,0,0);">&lt;/style&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">img </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">src</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">"../image/pink.png"</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">style</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">"display:none"</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">div </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">class</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">"img-purple"</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">style</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">"display:none"</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">div</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

图片资源请求如下：![/images/20220523/71c13ec150ad4f0ebb74dc5533556101.png][https_user-images.githubusercontent.com_9698086_27082582-f2380d3a-5077-11e7-9878-e218c8e0c04f.png]

设置了`display:none`属性的元素，图片不会渲染出来，但会加载。

原理

把DOM树和样式规则树匹配构建渲染树时，会把可渲染元素上的所有属性（如`display:none`属性和`background-image`属性）结合一起产出到渲染树。

当解析渲染树时会加载`<img>`标签元素上的图片，发现元素上有`background-image`属性时会加载背景图片。

当绘制时发现元素上有`display:none`属性，则不计算该元素位置，也不会绘制该元素。

JavaScript

<table style="margin-left:0px;font-size:13px;border:none;margin-top:0px;margin-right:0px;margin-bottom:0px;padding:0px;border-spacing:0px;width:auto;background:none;table-layout:auto;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;"> 
   <td style="font-size:13px;text-align:center;background-image:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;background-color:rgb(238,238,238);"> 
    <div style="border:none;margin:0px;padding-right:0px;padding-left:0px;background:none;text-align:left;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:15px;"> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       7 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       8 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       9 
     </div> 
    </div></td> 
   <td style="font-size:13px;text-align:center;width:581.333px;background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;"> 
    <div style="margin:0px;padding-right:0px;padding-left:0px;text-align:left;color:rgb(0,0,0);white-space:pre;border:none;padding-top:5px;padding-bottom:3px;background:none;line-height:15px;"> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(255,0,0);">&lt;style&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">.img-yellow </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">background-image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;">url</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;">../image/yellow.png</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(255,0,0);">&lt;/style&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">div </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">style</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">"display:none"</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">img </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">src</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">"../image/red.png"</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">div </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">class</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">"img-yellow"</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">div</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">div</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

图片资源请求如下：  
![/images/20220523/a42dfcdc6a9c4fb9b5685a51cf915bdb.png][https_user-images.githubusercontent.com_9698086_27082391-18d9f472-5077-11e7-8618-1dab27fbef5d.png]

设置了`display:none`属性元素的子元素，样式表中的背景图片不会渲染出来，也不会加载；而<img>``标签的图片不会渲染出来，但会加载。

原理

正如上面所说的，构建渲染树时，只会把可渲染元素产出到渲染树，这就意味有不可渲染元素，当匹配DOM树和样式规则树时，若发现一个元素的属性上有`display:none`，浏览器会认为该元素的子元素是不可渲染的，因此不会把该元素的子元素产出到渲染树上。

当解析渲染树时渲染树上没有设置了`display:none`属性元素的子元素，因此不会加载该元素中子元素的背景图片。

当绘制时也因为渲染树上没有设置了`display:none`属性元素的子元素，因此该元素中子元素的背景图片不会渲染出来。

### 重复图片 ###

JavaScript

<table style="margin-left:0px;font-size:13px;border:none;margin-top:0px;margin-right:0px;margin-bottom:0px;padding:0px;border-spacing:0px;width:auto;background:none;table-layout:auto;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;"> 
   <td style="font-size:13px;text-align:center;background-image:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;background-color:rgb(238,238,238);"> 
    <div style="border:none;margin:0px;padding-right:0px;padding-left:0px;background:none;text-align:left;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:15px;"> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
    </div></td> 
   <td style="font-size:13px;text-align:center;width:581.333px;background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;"> 
    <div style="margin:0px;padding-right:0px;padding-left:0px;text-align:left;color:rgb(0,0,0);white-space:pre;border:none;padding-top:5px;padding-bottom:3px;background:none;line-height:15px;"> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">img</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">-</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">blue</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">background</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">-</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">url</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">blue</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">png</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">div </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">class</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">"img-blue"</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&lt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">/div&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">&lt;img src="../i</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">mage</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">/blue.png"&gt;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">&lt;img src="../i</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">mage</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">blue</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;">png</span>" 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

图片资源请求如下：  
![1460000010032509][]

页面中多个`<img>`标签或样式表中的背景图片图片路径是同一个，图片只加载一次。

原理

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

### 不存在元素的背景图片 ###

<table style="margin-left:0px;font-size:13px;border:none;margin-top:0px;margin-right:0px;margin-bottom:0px;padding:0px;border-spacing:0px;width:auto;background:none;table-layout:auto;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;"> 
   <td style="font-size:13px;text-align:center;background-image:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;background-color:rgb(238,238,238);"> 
    <div style="border:none;margin:0px;padding-right:0px;padding-left:0px;background:none;text-align:left;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:15px;"> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
    </div></td> 
   <td style="font-size:13px;text-align:center;width:581.333px;background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;"> 
    <div style="margin:0px;padding-right:0px;padding-left:0px;text-align:left;color:rgb(0,0,0);white-space:pre;border:none;padding-top:5px;padding-bottom:3px;background:none;line-height:15px;"> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">img</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">-</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">blue</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">background</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">-</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">url</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">blue</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">png</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">img</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">-</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">orange</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">background</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">-</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">url</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">orange</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">png</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

图片资源请求如下：![/images/20220523/990829eb750541e3bc031dd3e0b90334.png][https_user-images.githubusercontent.com_9698086_27082444-510752d6-5077-11e7-9d2a-5dee39ec0511.png]

不存在元素的背景图片不会加载。

原理

不存在的元素不会产出到DOM树上，因此渲染树上也不会有不存在的元素，当解析渲染树时无法解析不存在的元素，不存在的元素上的图片自然不会加载也不会渲染。

### 伪类的背景图片 ###

<table style="margin-left:0px;font-size:13px;border:none;margin-top:0px;margin-right:0px;margin-bottom:0px;padding:0px;border-spacing:0px;width:auto;background:none;table-layout:auto;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;"> 
   <td style="font-size:13px;text-align:center;background-image:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;background-color:rgb(238,238,238);"> 
    <div style="border:none;margin:0px;padding-right:0px;padding-left:0px;background:none;text-align:left;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:15px;"> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
    </div></td> 
   <td style="font-size:13px;text-align:center;width:581.333px;background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;"> 
    <div style="margin:0px;padding-right:0px;padding-left:0px;text-align:left;color:rgb(0,0,0);white-space:pre;border:none;padding-top:5px;padding-bottom:3px;background:none;line-height:15px;"> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">img</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">-</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">green</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">background</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">-</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">url</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">green</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">png</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">img</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">-</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">green</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">hover</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">background</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">-</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">url</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">image</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">/</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">red</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">png</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

触发hover前的图片资源请求如下：  
![/images/20220523/990829eb750541e3bc031dd3e0b90334.png][https_user-images.githubusercontent.com_9698086_27082444-510752d6-5077-11e7-9d2a-5dee39ec0511.png]

触发hover后的图片资源请求如下：  
![/images/20220523/990829eb750541e3bc031dd3e0b90334.png][https_user-images.githubusercontent.com_9698086_27082444-510752d6-5077-11e7-9d2a-5dee39ec0511.png]

当触发伪类的时候，伪类样式上的背景图片才会加载。

原理

触发hover前，DOM树与样式规则树匹配的是无hover状态选择器`.img-green`的样式，因此渲染树上`background-image`属性的值是`url(../image/green.png)`，解析渲染树时加载的是green.png，绘制时渲染的也是green.png。

触发hover后，因为`.img-green:hover`的优先级比较高，因此DOM树与样式规则树匹配的是有hover状态选择器`.img-green:hover`的样式，渲染树上`background-image`属性的值是`url(../image/red.png)`，解析渲染树时加载的是red.png，绘制时渲染的也是red.png。

## 应用 ##

### 占位图 ###

当使用样式表中的背景图片作为占位符时，要把背景图片转为base64格式。这是因为背景图片加载的顺序在``标签后面，背景图片可能会在<img>``标签图片加载完成后才开始加载，达不到想要的效果。

### 预加载 ###

很多场景里图片是在改变或触发状态后才显示出来的，例如点击一个Tab后，一个设置`display:none`隐藏的父元素变为显示，这个父元素里的子元素图片会在父元素显示后才开始加载；又如当鼠标hover到图标后，改变图标图片，图片会在hover上去后才开始加载，导致出现闪一下这种不友好的体验。

在这种场景下，我们就需要把图片预加载，预加载有很多种方式:

1.  若是小图标，可以合并成雪碧图，在改变状态前就把所有图标都一起加载了。
2.  使用上文讲到的，设置了display:none属性的元素，图片不会渲染出来，但会加载。把要预加载的图片加到设置了`display:none`的元素背景图或``标签里。
3.  在javascript创建img对象，把图片url设置到img对象的src属性里。

原文链接：[http://web.jobbole.com/91921/][http_web.jobbole.com_91921]

也可以看：[https://segmentfault.com/a/1190000010032501][Leechikit]

[Leechikit]: https://segmentfault.com/a/1190000010032501
[005K6mYCgy1fi262ex74qj30hc081q3m.jpg]: /images/20220523/23af19fce435435e98d95ee15178c412.png
[https_user-images.githubusercontent.com_9698086_27082582-f2380d3a-5077-11e7-9878-e218c8e0c04f.png]: /images/20220523/71c13ec150ad4f0ebb74dc5533556101.png
[https_user-images.githubusercontent.com_9698086_27082391-18d9f472-5077-11e7-8618-1dab27fbef5d.png]: /images/20220523/a42dfcdc6a9c4fb9b5685a51cf915bdb.png
[1460000010032509]: /images/20220523/0c34074cb3a8455f8eaf44e8021d995a.png
[https_user-images.githubusercontent.com_9698086_27082444-510752d6-5077-11e7-9d2a-5dee39ec0511.png]: /images/20220523/990829eb750541e3bc031dd3e0b90334.png
[http_web.jobbole.com_91921]: http://web.jobbole.com/91921/