19.请介绍一下重绘和回流

渲染流程

在这里插入图片描述

重绘

触发条件

当DOM的修改导致了样式的变化,并且没有影响几何属性的时候,会导致重绘

重绘过程

由于没有导致DOM几何属性的变化,因此元素的位置信息不需要更新,从而省去布局的过程。
跳过了生成布局树和建图层树的阶段,直接生成绘制列表,然后继续进行分块、生成位图等后面一系列操作。
所以重绘不一定导致回流,但回流一定发生了重绘
在这里插入图片描述

回流

触发条件

当DOM结构的修改引发DOM几何尺寸变化的时候,具体情况比如
1. 一个DOM元素的几何属性变化,常见的几何属性有width height padding margin left top border等等
2.使DOM节点发生增减或者移动
3.读写offset族、scroll族和client族属性的时候
4.调用window.getComputedStyle方法

回流过程

触发回流的时候,如果DOM结构发生改变,则重新渲染DOM树,然后将后面的流程(包括主线程之外的任务)全部走一遍。
相当于将解析和合成的过程重新又走了一遍,开销是非常大的
在这里插入图片描述

合成

利用CSS3的transform opacity filter这些属性可以实现合成的效果,也就是常说的GPU加速。
GUP加速的原因:
在合成的情况下,会直接跳到布局和绘制流程,直接进入非主线程处理的部分,即直接交给合成线程处理,交给它处理有两大好处:
能够充分发挥GPU的优势。合成线程生成位图的过程中会调用线程池,并在其中使用GPU进程加速生成,而GPU是擅长处理位图数据的
没有占用主线程的资源,即使主线程卡住啦,效果依然能够流畅地展示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

宋哈哈

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

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

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

打赏作者

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

抵扣说明:

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

余额充值