HTML和CSS中的图片加载与渲染规则

Web浏览器先会把获取到的HTML代码解析成一个DOM树，HTML中的每个标签都是DOM树中的一个节点，包括display: none隐藏的标签，还有JavaScript动态添加的元素等。

浏览器会获取到所有样式，并会把所有样式解析成样式规则，在解析的过程中会去掉浏览器不能识别的样式。

浏览器将会把DOM树和样式规则组合在一起（DOM元素和样式规则匹配）后将会合建一个渲染树（Render Tree），渲染树类似于DOM树，但两者别还是很大的：

渲染树能识别样式，渲染树中每个节点（NODE）都有自己的样式，而且渲染树不包含隐藏的节点（比如display:none的节点，还有内的一些节点），因为这些节点不会用于渲染，也不会影响节点的渲染，因此不会包含到渲染树中。一旦渲染树构建完毕后，浏览器就可以根据渲染树来绘制页面了。

简单的归纳就是浏览器渲染Web页面大约会经过六个过程：

● 解析HTML，构成DOM树
● 解析加载的样式，构建样式规则树
● 加载JavaScript，执行JavaScript代码
● DOM树和样式规则树进行匹配，构成渲染树
● 计算元素位置进行页面布局
● 绘制页面，最终在浏览器中呈现

是不是会感觉这个和我们图像加载渲染没啥关系一样，事实并非如此，因为img、picture或者background-image都是DOM树或样式规则中的一部分，那么咱们套用进来，图片加载和渲染的时机有可能是下面这样：

● 解析HTML时，如果遇到img或picture标签，将会加载图片
● 解析加载的样式，遇到background-image时，并不会加载图片，而会构建样式规则树
● 加载JavaScript，执行JavaScript代码，如果代码中有创建img元素之类，会添加到DOM树中；如果有添加background-image规则，将会添加到样式规则树中
● DOM树和样式规则匹配时构建渲染树，如果DOM树节点匹配到样式规则中的backgorund-image，则会加载背景图片
● 计算元素（图片）位置进行布局
● 开始渲染图片，浏览器将呈现渲染出来的图片

上面套用浏览器渲染页面的机制，但图片加载与渲染还是有一定的规则。因为，页面中不是所有的（或picture）元素引入的图片和background-image引入的背景图片都会加载的。那么就引发出新问题了，什么时候会真正的加载，加载规则又是什么？

先概括一点：

Web页面中不是所有的图片都会加载和渲染！

我们可以归纳为：

● img、picture和设置background-image的元素遇到display:none时，图片会加载，但不会渲染。
● img、picture和设置background-image的元素祖先元素设置display:none时，background-image不会渲染也不会加载，而img和picture引入的图片不会渲染但会加载
● img、picture和background-image引入相同路径相同图片文件名时，图片只会加载一次
● 样式文件中background-image引入的图片，如果匹配不到DOM元素，图片不会加载
● 伪类引入的background-image，比如:hover，只有当伪类被触发时，图片才会加载