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

标签: tuicool | 发表时间:2017-07-04 00:00 | 作者:
出处:http://itindex.net/relian

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

浏览器的工作流程

要研究图片资源的加载和渲染,我们先要了解浏览器的工作原理。以 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="../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="../image/red.png">
    <div class="img-yellow"></div>
</div>

图片资源请求如下:

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

原理

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

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

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

重复图片

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

图片资源请求如下:

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

原理

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

不存在元素的背景图片

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

图片资源请求如下:

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

原理

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

伪类的背景图片

.img-green {
    background-image: url(../image/green.png);
}
.img-green:hover{
    background-image: url(../image/red.png);
}
<div class="img-green"></div>

触发hover前的图片资源请求如下:

触发hover后的图片资源请求如下:

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

原理

触发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>标签后面,背景图片可能会在 <img>标签图片加载完成后才开始加载,达不到想要的效果。

预加载

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

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

  1. 若是小图标,可以合并成雪碧图,在改变状态前就把所有图标都一起加载了。

  2. 使用上文讲到的,设置了display:none属性的元素,图片不会渲染出来,但会加载。把要预加载的图片加到设置了 display:none的元素背景图或 <img>标签里。

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

相关 [web 图片 资源] 推荐:

web资源优化之图片加载的时机

- - SegmentFault 最新的文章
图片资源是 WEB项目中很重要的组成部分,也是交互设计中一个很重要的体现,往往一张图能胜过千言万语,所谓“一图胜白言”就是这个道理. 然后大量的图片也会给服务器带来很大的压力,据统计:图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片,那么问题就来了. 如何最大化优化图片资源,图片优化的手段有那些.

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

- - IT瘾-tuicool
此文研究页面中的图片资源的加载和渲染时机,使得我们能更好的管理图片资源,避免不必要的流量和提高用户体验. 要研究图片资源的加载和渲染,我们先要了解浏览器的工作原理. 以 Webkit引擎的工作流程为例:. 从上图可看出,浏览器加载一个HTML页面后进行如下操作:. 解析HTML —> 构建DOM树.

最好的开源Web开发资源

- 陈晖 - Solidot
51开源社区 写道 "B2bweb.fr对“开源中最好的Web开发的资源(中文)进行了汇总.

一堆开源的Web开发资源

- - 可咔酷 | 网络杂货铺
一堆的Web相关的开源资料,涵盖HTML、JS、PHP、服务器等方面的资料,而且都是开源的,收集起来,方便以后学习使用. 学习HTML 5编程和设计. HTML5 Rocks : Major Feature Groups  的学习 HTML5 的资源 (HTML5 演示, 教程 ).  源码. HTML5 Dashboard – Mozilla,效果很炫.

CDNJS:Web 上最快的 JavaScript 资源库

- - ITeye资讯频道
CDNJS 是一个互联网上的 JavaScript 资料库,类似 Google CDN 和微软CDN服务,但是速度比这二者更加快. CDNJS 上提供了众多 JavaScript 库,你可以直接在网页上引用这些 JS 文件,实现用户浏览网站的最佳速度体验. CDNJS 上提供的完整的 JavaScript 库列表请看: http://cdnjs.com/.

Web性能优化之图片优化

- - 极客521 | 极客521
HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片. 从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及.

开源中最好的Web开发的资源

- cgeek - 酷壳 - CoolShell.cn
文章来源:Best “must know” open sources to build the new Web. 个人感觉这个收集贴收集成相当的全. ★ HTML5 Rocks : Major Feature Groups  的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码. 很不错的 HTML5 Dashboard – Mozilla,效果很炫.

开源中最好的 Web 开发的资源(上)

- 杯子 - cnBeta.COM
现在web开发包含的技术层面越来越多,要了解掌握这些技术是一件费时费力的事情. 这里对WEB开发中所需要用到的资源进行整理,提供大家更高效的去进行开发. 在上篇中我们提供了:HTML编程、设计、服务端软件、php框架和工具、数据库、API和在线数据等资源.