h5 图片资源的引用和使用注意事项总结

最新推荐文章于 2023-08-10 21:27:18 发布

鹿鹿鹿啦

最新推荐文章于 2023-08-10 21:27:18 发布

阅读量2.1k

点赞数

文章标签：前端图片优化

本文链接：https://blog.csdn.net/l354002675/article/details/89510591

版权

写在前面的话
最近做的项目有很多图片资源，引发了自己对图片的渲染和使用等进行了深入的思考，如何优化性能？如何提高体验？背后的原因是怎样的？等等等，故记此文。

图片渲染的过程

一些必要的题外话。
页面的渲染过程

解析HTML —> 构建DOM树
加载样式 —> 解析样式 —> 构建样式规则树
加载javascript —> 执行javascript代码
把DOM树和样式规则树匹配构建渲染树
计算元素位置进行布局
绘制

图片加载与渲染规则

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

display:none

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

原理
解析HTML时，会加载img标签上的图片，但是在构建渲染树时会忽略display:none的元素，故display:none的元素不会出现在页面上。
既：display:none的<img>标签的图片不会渲染出来，但会加载。

重复图片

页面中多个<img>标签或样式表中的背景图片图片路径是同一个，图片只加载一次。
原理
浏览器请求资源时，都会先判断是否有缓存，若有缓存且未过期则会从缓存中读取，不会再次请求。先加载的图片会存储到浏览器缓存中，后面再次请求同路径图片时会直接读取缓存中的图片。

不存在元素的背景图片

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

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

原理

触发hover前，构建渲染树过程中，遍历DOM树时，该元素匹配的样式规则是无hover状态选择器.img-green的样式，因此加载无hover状态选择器.img-green的样式上green.png图片。该元素是可见元素，因此会被产出到渲染树上，绘制时渲染的也是green.png。

触发hover后，因为.img-green:hover的优先级比较高，构建新的渲染树过程中，该元素匹配的是有hover状态选择器，因此加载有hover状态选择器.img-green:hover的样式上的red.png图片。该元素是可见元素，因此会被产出到渲染树上，绘制时渲染的也是red.png。

应用

占位图

当使用样式表中的背景图片作为占位符时，要把背景图片转为base64格式。这是因为背景图片加载的顺序在标签后面，背景图片可能会在标签图片加载完成后才开始加载，达不到想要的效果。

预加载

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

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

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

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

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

图片加载闪动问题

这个问题是因为，如果图片不固定宽高，那么浏览器首次加载时渲染时，会出现闪动问题，即图片区域开始没有高度，几乎不占空间，但等图像开始加载出来后，就会突然撑起高度，造成闪动情况，体验很不友好。这个形成的原因是因为，浏览器加载图片时，在图片没有被全部加载出来时，尤其现在png格式的图片有交错类型，图片会一点一点通过网络加载显示出来，在没完全加载出来时，浏览器不知道图片的宽高，这就出现了闪动的情况。

我的解决方案：在图片外层套一个高度固定的div，提前占位