html和css中的图片加载与渲染规则是什么样的？

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

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

浏览器将会把DOM树和样式规则组合在一起（DOM元素和样式规则匹配）后将会合建一个渲染树（Render Tree），渲染树类似于DOM树，

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

简单的归纳就是浏览器渲染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，则会加载背景图片
• 计算元素（图片）位置进行布局
• 开始渲染图片，浏览器将呈现渲染出来的图片

上面套用浏览器渲染页面的机制，但图片加载与渲染还是有一定的规则。

因为，页面中不是所有的<img>（或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，只有当伪类被触发时，图片才会加载