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

相关推荐
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
黎金安3 小时前
前端第二次作业
前端·css·css3
阳光开朗大男孩 = ̄ω ̄=4 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小马哥编程5 小时前
【前端基础】CSS基础
前端·css
Justinc.6 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge6 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
As977_7 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189117 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾7 小时前
前端基础-html-注册界面
前端·算法·html
我要洋人死10 小时前
导航栏及下拉菜单的实现
前端·css·css3