web图片加载和渲染时机

在网页中经常和图片打交道，一般用到的图片有两种引用方式，一是标签，而是通过backgeound引用作为背景图片。
但是这两种方式加载图片的时机是不一样的。

关于图片加载和渲染的时机：

1.解析HTML（遇到标签会加载图片） —> 构建DOM树
2.加载样式 —> 解析样式【遇到background-url属性不会加载背景图片】 —> 构建样式规则树
3.加载javascript —> 执行javascript代码
4.把DOM树和样式规则树匹配构建渲染树【加载渲染树上的背景图片】
5.计算元素位置进行布局
6.绘制【开始渲染图片】

扩展

构建渲染树时，只会把可渲染元素构建到渲染树上。

1
2
3

<div style="display:none;background-url:url('./a.jpg')">  <!-- 不会加载，不会渲染 -->
    <img src="xx" />   <!-- 只加载不渲染 -->
</div>

如上，设置了display:none的元素的背景图不会被加载。设置了display:none的元素不会出现在渲染树上，按照上面讲的图片加载和渲染过程，自然在构建渲染树时不会加载背景图片。

Q: 诸如图片列表这种页面中，为什么默认占位图要用base64编码，而不引用真实图片地址？
A: 如果使用了真实图片url,根据图片的加载和渲染流程，很可能会在加载背景图片前先加载图片，达不到想要的效果。