浏览器渲染web页面的过程
- 解析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页面中的图片不是所有都会进行加载和渲染文章来源：https://www.toymoban.com/news/detail-717407.html
<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，只有当伪类被触发时，图片才会加载文章来源地址https://www.toymoban.com/news/detail-717407.html
到了这里，关于html和css中图片加载与渲染的规则是什么？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
