菜单

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

2018年11月15日 - CSS/CSS3

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

2017/07/27 · JavaScript
· 渲染

初稿出处: Leechikit   

此文研究页面被之图资源的加载与渲染时机,使得我们能再次好之治本图片资源,避免不必要的流量和增进用户体验。

浏览器的行事流程虽不说了,网上发出诸多资料。

浏览器的劳作流程

假定钻图片资源的加载与渲染,我们先要打听浏览器的做事原理。以Webkit发动机的行事流程也条例:

图片 1

打上图可看出,浏览器加载一个HTML页面后展开如下操作:

由达到图我们不能够好直观的目图片资源从什么时起加载,下图标有图加载与渲染之机会:

1.先是,页面中莫是具的<img>标签图片与样式表中的背景图片都见面加载

图片加载与渲染规则

页面中莫是怀有的<img>签图片和样式表背景图片都见面加载。

2.当为一个素设置了display:none属性(此元素为<img>或来背景图的任何因素),图片未会见渲染出来,但是会加载。

display:none

JavaScript

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

1
2
3
4
5
6
7
<style>
.img-purple {
    background-image: url(../image/purple.png);
}
</style>
<img src="../image/pink.png" style="display:none">
<div class="img-purple" style="display:none"></div>

图表资源要如下:图片 2

设置了display:none特性的因素,图片未会见渲染出来,但会加载。

原理

管DOM树和体制规则树匹配构建渲染树时,会把可渲染元素上的装有属性(如display:none属性和background-image属性)结合并出现到渲染树。

当解析渲染树时会加载<img>签元素上的图,发现元素上发出background-image属性时见面加载背景图片。

当绘制时意识元素上起display:none特性,则免计算该因素位置,也非会见绘制该因素。

JavaScript

<style> .img-yellow { background-image: url(../image/yellow.png);
} </style> <div style=”display:none”> <img
src=”../image/red.png”> <div class=”img-yellow”></div>
</div>

1
2
3
4
5
6
7
8
9
<style>
.img-yellow {
    background-image: url(../image/yellow.png);
}
</style>
<div style="display:none">
    <img src="../image/red.png">
    <div class="img-yellow"></div>
</div>

图片资源要如下:
图片 3

设置了display:none特性元素的子元素,样式表中的背景图片不会见渲染出来,也非会见加载;而<img>“标签的图形未会见渲染出来,但会加载。

原理

恰好而上面所说之,构建渲染树时,只会把可渲染元素产出到渲染树,这就象征有不可渲染元素,当匹配DOM树和体规则树时,若发现一个素的性上生display:none,浏览器会认为该因素的子元素是不足渲染的,因此不见面拿该因素的子元素产出到渲染树上。

当解析渲染树时渲染树上没有装了display:none性能元素的子元素,因此无会见加载该因素中子元素的背景图片。

当绘制时也以渲染树上没有安装了display:none性能元素的子元素,因此该因素中子元素的背景图片不见面渲染出来。

3.装了display:none属性的素的子元素,样式表中的背景图片既不见面渲染出来,也非会见进展加载,而<img>标签的图片未见面渲染,但会加载。

再次图片

JavaScript

.img-blue { background-image: url(../image/blue.png); } <div
class=”img-blue”></div> <img src=”../image/blue.png”>
<img src=”../image/blue.png”>

1
2
3
4
5
6
.img-blue {
    background-image: url(../image/blue.png);
}
<div class="img-blue"></div>
<img src="../image/blue.png">
<img src="../image/blue.png">

图资源要如下:
图片 4

页面中大多只<img>签或者样式表中的背景图片图片路径是跟一个,图片只加载同不行。

原理

浏览器请求资源时,都见面先行判断是否出缓存,若发生缓存还非过则会于缓存中读取,不见面重请求。先加载的图形会蕴藏到浏览器缓存中,后面再呼吁和路线图时见面一直读取缓存中的图纸。

4.重复图片,浏览器就加载同糟(熟悉浏览器特性的人且知情,浏览器在恳求资源时,会先判断是否发缓存,如果来缓存还缓存未过,则会自缓存中读取资源,不见面再度要)。(注:这里补充一个tip,有时候本地搭建之条件面临,浏览器资源时会面使缓存的,可以采取Ctrl+F5来强制浏览器还加载所有资源).

莫设有元素的背景图片

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

1
2
3
4
5
6
.img-blue {
    background-image: url(../image/blue.png);
}
.img-orange{
    background-image: url(../image/orange.png);
}

图形资源要如下:图片 5

切莫在元素的背景图片不会见加载。

原理

匪存的元素不见面冒出到DOM树上,因此渲染树上也未会见起非在的因素,当解析渲染树时无法解析不有的元素,不存的元素上之图纸自然非会见加载也未见面渲染。

5.不在元素的背景图片不会见叫加载。

伪类的背景图片

.img-green { background-image: url(../image/green.png); }
.img-green:hover{ background-image: url(../image/red.png); }

1
2
3
4
5
6
.img-green {
    background-image: url(../image/green.png);
}
.img-green:hover{
    background-image: url(../image/red.png);
}

触发hover前的图片资源要如下:
图片 6

触发hover后的图纸资源要如下:
图片 7

当接触伪类的时,伪类样式上的背景图片才会加载。

原理

触发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

6.伪类的背景图片不见面给加载,只有当触发伪类的早晚,伪类样式上的背景图片才见面被加载。

应用

应用

占位图

当以样式表中的背景图片作为占位符时,要管背景图片转为base64格式。这是以背景图片加载的逐一以标签后面,背景图片可能会在&lt;img&gt;标签图片加载成功后才起加载,达不至想只要之法力。

如出一辙、展位图,当用样式表中的背景图片作为占位符时,要拿背景图片转为base64格式。这是为背景图片加载的逐一以<img>标签后,背景图片可能会见于<img>标签图片加载成功后才开加载,达不至想如果的功力。

预加载

许多场面里图片是当转或者点状态后才亮出来的,例如点击一个Tab后,一个装display:none躲的父元素变为显示,这个父元素里的子元素图片会在父元素显示后才起来加载;又使当鼠标hover到图标后,改变图标图片,图片会以hover上去后才开加载,导致出现闪转这种不协调之心得。

每当这种状况下,我们虽需要将图纸预加载,预加载有很多栽方法:

  1. 要是小图标,可以统一成为雪碧图,在改变状态前便拿具有图标都共同加载了。
  2. 采用上文讲到的,设置了display:none属性的素,图片未会见渲染出来,但会加载。把要预加载的图加到设置了display:none的元素背景图或“标签里。
  3. 在javascript创建img对象,把图片url设置到img对象的src属性里。

    1 赞 3 收藏
    评论

图片 8

二、预加载

1.若凡小图标,可以统一成为雪碧图。

2.将要预加载的图加到设置了display:none属性的素背景图要<img>标签里。

3.在javascript创建img对象,把图片url设置到img对象的src属性里。

相关文章

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图