此文研究页面中的图片资源的加载和衬着时机，使得我们能更好的打点图片资源，制止不须要的流量和提高用户体验。

浏览器的事情流程

要研究图片资源的加载和衬着，我们先要了解浏览器的事情道理。以Webkit引擎的事情流程为例：

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

解析HTML —> 构建DOM树

加载样式 —> 解析样式 —> 构建样式法则树

加载javascript —> 执行javascript代码

把DOM树和样式法则树匹配构建衬着树

计算元素位置进行构造

绘制

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

解析HTML【遇到<img>标签加载图片】 —> 构建DOM树

加载样式 —> 解析样式【遇到配景图片链接不加载】 —> 构建样式法则树

加载javascript —> 执行javascript代码

把DOM树和样式法则树匹配构建衬着树【遍历DOM树时加载对应样式法则上的配景图片】

计算元素位置进行构造

绘制【开始衬着图片】

图片加载与衬着法则

页面中不是所有的<img>标签图片和样式表配景图片城市加载。

display:none <style> .img-purple { background-image: url(../image/purple.png); } </style> <img src=""> <div></div>

图片资源请求如下：

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

道理

把DOM树和样式法则树匹配构建衬着树时，只会把可见元素和它对应的样式法则结合一起产出到衬着树，这就意味有不偏见元素，当匹配DOM树和样式法则树时，若发明一个元素的对应的样式法则上有display:none，浏览器会认为该元素是不偏见的，因此不会把该元素产出到衬着树上。

上面代码中，当解析HTML时会加载<img>标签元素上的图片。

当把DOM树和样式法则树匹配构建衬着树时，遍历DOM树上的元素，发明元素对应的样式法则上有background-image属性时会加载配景图片，但是因为这个元素是不偏见元素（对应的样式法则上有diaplay:none），不会把该元素和它对应的样式法则产出到衬着树。

当绘制时因为衬着树上没有该元素，因此不会绘制该元素的配景图片。

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

图片资源请求如下：

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

道理

正如上面所说的，，当匹配DOM树和样式法则树时，若发明元素的对应的样式法则上有display:none，浏览器会认为该元素的子元素是不偏见的，因此不会把该元素的子元素产出到衬着树上。

当构建衬着树遇到了设置了display:none属性的不偏见元素时，不会继续遍历不偏见元素的子元素，因此不会加载该元素中子元素的配景图片。

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

反复图片 .img-blue { background-image: url(../image/blue.png); } <div></div> <img src=""> <img src="">

图片资源请求如下：

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

道理

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

不存在元素的配景图片 .img-blue { background-image: url(../image/blue.png); } .img-orange{ background-image: url(../image/orange.png); } <div></div>

图片资源请求如下：

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

道理