Web图片资源的加载和渲染时间

本文研究页面上图像资源的加载和渲染时间，以便我们更好地管理图像资源，避免不必要的流量并改善用户体验.

要研究图像资源的加载和渲染，首先必须了解浏览器的工作原理. 以Webkit引擎的工作流程为例:

如上图所示，在浏览器加载HTML页面后，请按以下步骤操作:

从上图中，我们无法很直观地看到何时加载图像资源，并且下面的图标显示了图像加载和渲染的时间:

并非所有标签图像和样式表背景图像都会加载到页面上.

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

图片资源请求如下:

带有显示元素的元素: none属性集不会被渲染，但是图像会被加载.

原理

将DOM树和样式规则树匹配以构造渲染树时，只有可见元素及其对应的样式规则被组合以生成渲染树，这意味着存在不可见元素. 在树中，如果发现元素的相应样式规则显示: 无，浏览器将认为该元素不可见，因此不会将元素输出到渲染树.

在上面的代码中，当解析HTML时，会加载标签元素上的图像.

在将DOM树和样式规则树匹配以构建渲染树时，遍历DOM树上的元素，并发现当与元素对应的样式规则具有background-image属性时，背景图像已加载浏览器加载图片原理，但是因为此元素是不可见的元素（相应的样式规则具有diaplay: 无），所以该元素及其相应的样式规则将不会输出到渲染树.

由于绘制时渲染树上没有此类元素，因此不会绘制该元素的背景图片.

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

图片资源请求如下:

显示的子元素: 未设置任何属性元素，样式表中的背景图像将不会呈现，也不会被加载；并且标签的图像将不会呈现，但会被加载.

原理

如上所述，当匹配DOM树和样式规则树时，如果发现元素的相应样式规则显示: 无，浏览器将认为该元素的子元素是不可见的，因此它不会将此元素的子元素输出到渲染树.

在构建显示树时遇到显示元素不可见的渲染树时: 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-blue {
    background-image: url(../image/blue.png);
}
.img-orange{
    background-image: url(../image/orange.png);
}
<div class="img-orange"></div>

图片资源请求如下:

不存在的元素的背景图像将不会加载.

原理

不存在的元素将不会输出到DOM树. 在构建渲染树期间遍历DOM树时，无法遍历不存在的元素，因此将不会加载任何图像，也不会将其输出到渲染树. 解析渲染树时，无法解析不存在的元素，自然地不存在的元素也不会被渲染.

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

触发悬停之前的图像资源请求如下:

触发悬停后的图像资源请求如下:

触发伪类时，将加载伪类样式的背景图像.

原理

在触发悬停之前，在渲染树的构建过程中遍历DOM树时，与此元素匹配的样式规则是没有悬停状态选择器的样式. img-green，因此没有悬停状态选择器的样式. -green已加载拍摄green.png图片. 该元素是可见元素，因此将被输出到渲染树，并且在绘制时还会渲染green.png.

在触发悬停之后，由于.img-green的优先级: 悬停相对较高，因此在构建新的渲染树的过程中，此元素与悬停状态选择器匹配，因此将加载悬停状态选择器. : 关于悬浮样式的Red.png图片. 该元素是可见元素，因此将被输出到渲染树，并且在绘制时也会渲染red.png.

在样式表中将背景图像用作占位符时浏览器加载图片原理，请将背景图像转换为base64格式. 这是因为加载背景图像的顺序在标记后面. 在加载标签图像之前，可能无法开始加载背景图像，并且无法获得所需的效果.

在许多场景中，更改或触发状态后都会显示图片. 例如，单击选项卡后，隐藏的父元素显示为: 将不显示任何内容，并且该父元素中的子元素图片将显示在父元素中. 加载仅在显示后开始；例如，当鼠标悬停在图标上时，更改图标图片，悬停后图片将开始加载，从而产生这种不友好的闪烁体验.

在这种情况下，我们需要预加载图像. 有多种预加载方式:

如果它是一个小图标，可以将其合并为一个精灵图像，并且在更改状态之前，所有图标都将一起加载.

将上面提到的元素与display: none属性一起使用，将不会渲染图像，但会加载该图像. 将要预加载的图像添加到背景图像或带有显示的元素的标签中: 未设置.

在javascript中创建一个img对象，然后将图片网址设置为img对象的src属性.

欢迎关注: Leechikit

原始链接: segmentfault.com

在本文结尾处，欢迎提出问题和更正.

撰写原创文章并不容易. 如果本文对您有所帮助，请喜欢，推荐并关注作者的支持.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-200465-1.html