浏览器的渲染过程

浏览器渲染过程:

1.解析html,生成DOM树,解析CSS,生成CSSOM树

在这里插入图片描述

2.将DOM树和CSSOM树结合,生成渲染树(Render Tree)

生成渲染树
①: 从DOM树的根节点开始遍历每个可见节点
②: 对每个可见节点,找到CSSOM数中对应的规则,并应用它们
③: 根据每个可见节点以及其对应的样式,组合生成渲染树

3.Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置、大小)

通过构建渲染树,我们将可见DOM界定啊以及它对应的样式结合起来,科颜氏我们还需要计算它们在设备视口(viewport)内的确切位置和大小,这个计算的阶段就是回流

4.Painting(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝对像素

通过构造渲染树和回流阶段,我们知道了哪些节点是可见的,以及可见节点的样式和具体的几何信息(位置、大小),那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素,这个阶段就叫做重绘节点

5.Dispaly:将像素发送给GPU,展示在页面上。

原文地址:https://mp.weixin.qq.com/s/BboZ5wxNaXXjpAFignOYdw

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值