重绘和回流

重绘和回流

• 房子需要重新盖，就是回流
• 房子只要装修一下，就是重绘

浏览器会将回流和重绘放入一个队列，当达到一定的阈值，就会进行批处理

但是当访问以下属性或方法时，浏览器会立刻清空队列，进行重绘和回流

clientTop、clientLeft、clientWidth、clientWidth

offsetTop、offsetLeft、offsetWidth、offsetHeight

scrollTop、scrollLeft、scrollWidth、scrollHeight

getComputedStyle()、getBoundingClientRect()

所以要尽量避免使用以上属性或方法

避免回流的方式：

• 一次性改变完style属性，或者也可以通过增减class属性的方式
• 对于复杂的动画，采用绝对定位的形式脱离文档流，这样它就不会引起普通文档流的回流，虽然它也会引起页面的回流

相关链接：
https://www.bilibili.com/video/BV1YG4y127ZJ/?share_source=copy_web&vd_source=6bac919d0e003af4419677ae239707bf