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

浏览器渲染web页面的过程

1. 解析html，构成dom树
   2.加载css，构成样式规则树
   3.加载js，解析js代码
   4.dom树和样式树进行匹配，构成渲染树
   5.计算元素位置进行页面布局
   5.绘制页面，呈现到浏览器中

图片加载和渲染的过程

1.解析html，遇到<img>、<picture>，会加载图片，放入dom树中
2.加载css，遇到background-image时，不加载图片，放入样式树中
3.解析js，代码中有创建<img>、<picture>元素添加到dom树中，如果有添加background-image样式会添加到样式规则树中
4.构建渲染树时，如果dom节点匹配到样式规则中的background-iamge，会加载背景图片
5.计算图片位置进行布局
6.渲染图片

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，只有当伪类被触发时，图片才会加载