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

相关推荐
高级测试工程师欧阳1 小时前
CSS 基础概念
前端·css·css3
β添砖java4 小时前
案例二:登高千古第一绝句
前端·javascript·css
专注VB编程开发20年6 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
永日456706 小时前
学习日记-HTML-day51-9.9
前端·学习·html
奶昔不会射手7 小时前
css3之grid布局
前端·css·css3
用户458203153177 小时前
10个你可能不知道的实用CSS技巧,立竿见影提升开发效率
前端·css
睡不着先生8 小时前
CSS `:is()` & `:where()` 实战指南:简化选择器,提升可维护性
css
cellurw8 小时前
Day39 SQLite数据库操作与HTML核心API及页面构建
数据库·sqlite·html
拜无忧8 小时前
css带有“反向圆角”的 Tab 凸起效果。clip-path
前端·css
lyq3158 小时前
Sass 常用语法
css·scss