面试题:说一说浏览器渲染html的过程

浏览器渲染html的过程分为三大步骤
1.DOM构造
2.布局
3.绘制页面
在这里插入图片描述

1.DOM构造

浏览器首先将收到的html代码通过html解析器解析构建为一棵DOM树,把css解析成CSSOM
在这里插入图片描述
将收到的css代码通过css解析器构建出样式表规则,将这些规则分别放入对应的DOM节点上得到一颗带有样式的DOM树,也就是把CSSOM和DOM结合产生render tree
在这里插入图片描述

2.布局

浏览器按从上到下从左到右的顺序读取DOM的文档节点,按顺序存放到一条虚拟的传送带上,传送带上的盒子就是节点,而这条流动的传送带就是文档流
在这里插入图片描述
在这里插入图片描述

如果读取到的节点是属于另一个节点的子节点,那么放入传送带的时候就会按顺序放到该节点盒子的内部,如果子节点还有子节点在传送带上上的时候就会继续逃到子一级的盒子内部,根据他在DOM树上的结构可以嵌套的层级是没有限制的
在这里插入图片描述
文档流排完之后开始获取计算节点的坐标和大小等css属性,然后把盒子在仓库里一 一摆放这样就将节点布局到了页面上
在这里插入图片描述

绘制页面

布局完成后在页面上是看不到内容的,浏览器知识计算出了每一个节点的对象应该被放到页面的哪个位置上,但并没有可视化,因此最后一步就是将页面渲染出来,完成整个页面的渲染
在这里插入图片描述

注意:布置文档流是从body开始的
如果页面上的元素很多,可以打个包,把部分元素放到一个黑盒中,这个黑盒可以是from或者div也可以是其他元素,布局的时候不需要管黑盒内部有什么。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万事胜意sy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值