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

相关推荐
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
拜无忧15 小时前
html,svg,花海扩散效果
前端·css·svg
华仔啊20 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
在云端易逍遥21 小时前
前端必学的 CSS Grid 布局体系
前端·css
进阶的鱼1 天前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试
石金龙2 天前
[译] Composition in CSS
前端·css
天天扭码2 天前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153172 天前
CSS特异性:如何精准控制样式而不失控?
前端·css
葡萄城技术团队2 天前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html
糖糖TANG2 天前
从零开始制作我的第一个静态网页——教师节主题首页开发记录
html