浏览器渲染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页面中的图片不是所有都会进行加载和渲染
<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,只有当伪类被触发时,图片才会加载