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

浏览器的工作流程

要研究图片资本的加载和衬着，我们先要懂得浏览器的工作道理。以Webkit引擎的工作流程为例：

大年夜上图可看出，浏览器加载一个HTML页面落后行如下操作：

解析HTML —> 构建DOM树
加载样式 —> 解析样式 —> 构建样式规矩树
加载javascript —> 履行javascript代码
把DOM树和样式规矩树匹配构建衬着树
计算元素地位进行构造
绘制

大年夜上图我们不克不及很直不雅的看出图片资本大年夜什么时刻开端加载，下搁笔出图片加载和衬着的机会：

解析HTML【碰到<img>标签加载图片】 —> 构建DOM树
加载样式 —> 解析样式【碰到背景图片链接不加载】 —> 构建样式规矩树
加载javascript —> 履行javascript代码
把DOM树和样式规矩树匹配构建衬着树【加载衬着树上的背景图片】
计算元素地位进行构造
绘制【开端衬着图片】

此文研究页面中的图片资本的加载和衬着机会，使得我们能更好的治理图片资本，避免不须要的流量和进步用户体验。

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

display:none

<style> 
 
.img-purple { 
 
    background-image: url(../image/purple.png); 
 
} 
 
</style> 
 
<img src=http://developer.51cto.com/art/201708/"../image/pink.png" style="display:none"> 
 
<div class="img-purple" style="display:none"></div>

图片资本请求如下：

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

道理

把DOM树和样式规矩树匹配构建衬着树时，会把可衬着元素上的所有属性(如display:none属性和background-image属性)结合一路产出到衬着树。

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

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

<style> 
 
.img-yellow { 
 
    background-image: url(../image/yellow.png); 
 
} 
 
</style> 
 
<div style="display:none"> 
 
    <img src=http://developer.51cto.com/art/201708/"../image/red.png"> 
 
    <div class="img-yellow"></div> 
 
</div>

图片资本请求如下：

.img-blue { 
 
    background-image: url(../image/blue.png); 
 
} 
 
.img-orange{ 
 
    background-image: url(../image/orange.png); 
 
}

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

道理

正如膳绫擎所说的，构建衬着树时，只会把可衬着元素产出到衬着树，这就意味有弗成衬着元素，当匹配DOM树和样式规矩树时，若发明一个元素的属性上有display:none，浏览器会认为该元素的子元素是弗成衬着的，是以不会把该元素的子元素产出到衬着树上。

1/3 1 2 3 下一页尾页

　　推荐阅读

　　区块链技术基础：术语和用例

1. 区块和区块链区块链是一种分布在全部营业收集上的共享账本。营业交易被永远记录在仅附加到账本的区块中。所>>>详细阅读

本文标题：Web图片资源的加载与渲染时机

地址：http://www.17bianji.com/lsqh/36525.html

1/2 1